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

问题描述

我无法理解为什么我会看到这种意外行为。如果我有一些数据要传递到一个对象的道具中，该对象具有如下所示的表单，然后单击一个按钮，然后取消，然后单击另一个按钮，表单将显示先前单击的每次状态。在 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"));

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

标签： reactjsformsantd

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

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

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

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

问题描述

解决方案

推荐阅读