如何编辑在antd上载组件上发布的帖子图像
提问于 2022-10-20 05:00:15
我使用上传作为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的图像设置为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"
// }
}}然而，由于执行的结果，所有的组件，如缩略图，标题等，并没有输出与我的预期相反。
如何解决上述问题并设置initialValues？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-20 05:18:07
因为useSelector是在挂载后调用的，所以组件在第一次呈现时没有接收到initialValues。你可以利用它的效果。
const [form] = Form.useForm();
useEffect(function updateForm() {
form.setFieldsValue({ images: editPost.Images });
}, [form, editPost]);
<Form form={form}...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74140302
复制相关文章
点击加载更多
腾讯云开发者
