How to edit post image posted on antd upload component-CodePudding

I am using upload as a component of antd form.

<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>

I wanted to set the images of editPost as the initialValues property of upload, so I applied it as follows.

// 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"
    // }
  }}

However, as a result of execution, all components such as thumbnails, titles, etc. were not output contrary to my expectation.

How can I solve the above problem and set the initialValues?

CodePudding user response：

Since the useSelector is called after mounting, the component is not receiving the initialValues on first render. You can use an effect for that.

const [form] = Form.useForm();

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

<Form form={form}...