我正在使用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"
// }
}}
然而,作为执行的结果,所有组件,如缩略图、标题等都没有输出,这与我的预期相反。
如何解决上述问题并设置初始值?
1条答案
按热度按时间velaa5lx1#
由于
useSelector
是在装载后调用的,因此组件在第一次渲染时不会接收initialValues
。您可以使用效果来实现这一点。