React antd 4 Form in Modal resetFields 显示错误数据

Question

I am having trouble understanding why I am seeing this unexpected behavior. If I have some data that I am passing into a prop on an object that has a modal with a form done as shown below and I click on a button, then cancel, then click on a different button, the form is showing the previously clicked state each time. Within the useEffect code, I can see that the correct person is loaded, though the form initializes the previous person.

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Modal, Form, Input } from "antd";

const PersonEditForm = ({ person, onCreate, onCancel }) => {
  const [form] = Form.useForm();
  const prevRef = useRef();

  useEffect(() => {
    if (prevRef.current === null && person) {
      form.resetFields();
    }
    prevRef.current = person;
  });

  return (
    person && (
      <Modal
        visible={!!person}
        title="Person Editor"
        okText="Create"
        cancelText="Cancel"
        onCancel={onCancel}
        onOk={() => {
          form
            .validateFields()
            .then(values => {
              onCreate(values);
            })
            .catch(info => {
              console.log("Validate Failed:", info);
            });
        }}
      >
        <Form
          form={form}
          layout="vertical"
          name="form_in_modal"
          initialValues={person}
        >
          <Form.Item
            name="name"
            label="Name"
            rules={[
              {
                required: true,
                message: "Please input the person's name!"
              }
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    )
  );
};

const CollectionsPage = () => {
  const [person, setPerson] = useState(null);

  const onCreate = values => {
    console.log("Received values of form: ", values);
    setPerson(null);
  };

  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setPerson({ name: "Bob" });
        }}
      >
        Edit Bob
      </Button>
      <Button
        type="primary"
        onClick={() => {
          setPerson({ name: "John" });
        }}
      >
        Edit John
      </Button>
      <Button
        type="primary"
        onClick={() => {
          setPerson({ name: "Phil" });
        }}
      >
        Edit Phil
      </Button>
      <PersonEditForm
        person={person}
        onCreate={onCreate}
        onCancel={() => {
          setPerson(null);
        }}
      />
    </div>
  );
};

ReactDOM.render(<CollectionsPage />, document.getElementById("container"));

However, if I remove the person && ( from my <PersonEditForm> component, it works as expected. Can anyone explain the subtle difference I'm running into here? I have down-stream complex form components that weren't handling a null state, so I wanted to only create the modal if a person was being edited.

Answer 1

The code doesn't work because of some funny race condition arising from misusing form.resetForm to change initialValues . You would probably have to go into the actual implementation of initialValues to figure out what is going wrong.

However, if instead of reseting the form inside of useEffect , you were to assign the clicked person value using form.setFieldsValue(person) , your code would work as intended.

https://codesandbox.io/s/hungry-christian-cdn7t?file=/src/index.js