Ant Design 中 resetFields 导致自定义组件销毁并重新加载问题分析

2023-11-24 17:14:46

在 Form 中使用子组件的过程中发现，每次 resetFields 都会导致子组件销毁重建，而子组件由于要请求接口加载数据，所以会导致重复请求。本文记录相关 Issues 的查找过程和和相关源码分析

文章目录

一、现象说明
二、官方解释
- 2.1 官方文档
- 2.2 GitHub Issue
三、源码分析

一、现象说明

如下代码所示，每次子组件 FormChild 都会打 2 次 log，分析发现是 form.resetFields() 导致子组件重新加载了，而 form.setFieldsValue() 则不会导致组件重新加载

import React from "react";
import ReactDOM from "react-dom";
import { Form } from "antd";
import "antd/dist/antd.css";
import "./index.css";

ReactDOM.render(
  <div className="App">
    <FormDemo />
  </div>,
  document.getElementById("root")
);

function FormDemo() {
  const [form] = Form.useForm();

  React.useEffect(() => {
    form.resetFields();
  }, [form]);

  return (
    <Form form={form}>
      <Form.Item name="someitem">
        <FormChild />
      </Form.Item>
    </Form>
  );
}

function FormChild() {
  React.useEffect(() => {
    console.log("FormChild mounted");
  }, []);
  return <div>123</div>;
}

点击下方按钮运行代码：