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

Question

我无法理解为什么会出现这种意外行为。如果我有一些数据要传递到一个对象的道具中，该对象具有如下所示的表单，然后单击一个按钮，然后取消，然后单击另一个按钮，表单将显示先前单击的每次状态。在 useEffect 代码中，我可以看到加载了正确的人，尽管表单初始化了前一个人。

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"));

但是，如果我从 <PersonEditForm> 组件中删除 person && (，它会按预期工作。谁能解释我在这里遇到的细微差别？我有不处理空状态的下游复杂表单组件，所以我只想在有人被编辑时创建模式。

Answer 1

由于滥用form.resetForm 更改initialValues 引起的一些有趣的竞争条件，代码不起作用。您可能必须进入initialValues 的实际实现才能找出问题所在。

但是，如果不是重置 useEffect 内部的表单，而是使用 form.setFieldsValue(person) 分配单击的 person 值，那么您的代码将按预期工作。

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