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

Question

我使用上传作为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>

我想将editPost的图像设置为上传的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"
// }
}}

然而，由于执行的结果，所有组件，如缩略图、标题等，并没有像我预期的那样输出。

如何解决上述问题并设置initialValues？

Answer 1

由于useSelector是在安装后调用的，因此组件在第一次渲染时不会接收到initialValues。你可以使用效果。

const [form] = Form.useForm();
useEffect(function updateForm() {
form.setFieldsValue({ images: editPost.Images });
}, [form, editPost]);
<Form form={form}...