How to edit post image posted on antd upload component

Question

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?

Answer 1

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