如何编辑在antd上传组件上发布的帖子图像

c0vxltue  于 2022-10-21  发布在  其他
关注(0)|答案(1)|浏览(107)

我正在使用Upload作为antd表单的一个组件。

<Form
  name="posting"
  onFinish={onSubmitForm}      
  scrollToFirstError
  encType='multipart/form-data'
>
   <Form.Item
     name="images"
     rules={[          
       {
         required: true,         
       },
     ]}                    
       valuePropName="fileList"
       getValueFromEvent={normFile}
     >          
       <Upload.Dragger             
         name="image" 
         multiple            
         listType="picture"
         onChange={onChangeImages}
         beforeUpload={onBeforeUpload}
       >            
         <ImageUploaderText className='bold'>Drag files here OR</ImageUploaderText>            
         <Button type='primary' size='large' icon={<UploadOutlined />}>Upload</Button>
       </Upload.Dragger>
     </Form.Item>
</Form>

我想将编辑帖子的图像设置为Upload的InitialValues属性,所以我按如下方式应用它。

// how i tried
const { editPost } = useSelector((state) => state.post);

<Form
  initialValues={                 
    images: editPost.Images,

    // Images from editPost are:
    // {
    //   PostId: 119
    //   createdAt: "2022-10-20T09:56:38.000Z"
    //   id: 101
    //   src: "432212_540_1666259797288.jpg"
    //   uid: "__AUTO__1666269929239_0__"
    //   updatedAt: "2022-10-20T09:56:38.000Z"
    // }
  }}

然而,作为执行的结果,所有组件,如缩略图、标题等都没有输出,这与我的预期相反。
如何解决上述问题并设置初始值?

velaa5lx

velaa5lx1#

由于useSelector是在装载后调用的,因此组件在第一次渲染时不会接收initialValues。您可以使用效果来实现这一点。

const [form] = Form.useForm();

useEffect(function updateForm() {
  form.setFieldsValue({ images: editPost.Images });
}, [form, editPost]);

<Form form={form}...

相关问题