不要成为表单回显的“低头族”——活用setFieldsValue方法，让你的表单数据尽收眼底！

2023-12-09 10:10:05

缘起：表单回显的迷思

作为前端开发人员，我们经常使用表格来收集和展示数据。当涉及到对已有数据的编辑或修改时，我们就需要进行表单回显，即把已有的数据填充到表单中，方便用户进行修改。antd表单库中的setFieldsValue方法就是实现这一目的的利器。

import { Form, Input } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const initialValues = {
    name: 'John Doe',
    age: 25,
  };

  useEffect(() => {
    form.setFieldsValue(initialValues);
  }, []);

  return (
    <Form form={form}>
      <Form.Item
        label="Name"
        name="name"
        rules={[{ required: true, message: 'Please input your name!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Age"
        name="age"
        rules={[{ required: true, message: 'Please input your age!' }]}
      >
        <Input />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
};

export default MyForm;

在上述代码中，我们使用useEffect钩子在组件挂载时调用setFieldsValue方法，将initialValues对象中的数据设置到表单中。按照正常逻辑，表单中的输入框应该分别显示“John Doe”和“25”，但实际情况却并非如此。表单中的输入框依然是空的，没有显示任何内容。

抽丝剥茧：回显失败的根源

为了找出回显失败的原因，我们需要深入代码的内部世界，探寻setFieldsValue方法的工作原理。setFieldsValue方法的作用是将一个对象作为参数，将该对象中的键值对分别设置到表单中对应的字段上。

setFieldsValue(values) {
  const fieldsMeta = this.fieldsMeta;
  const newValues = {};
  Object.keys(values).forEach((name) => {
    if (fieldsMeta[name]) {
      newValues[name] = values[name];
    }
  });
  this.setValues(newValues);
}

从代码中可以看到，setFieldsValue方法首先会检查字段元数据（fieldsMeta）中是否存在与给定键值对对应的字段。如果存在，则将该键值对添加到newValues对象中。最后，调用setValues方法将newValues对象中的数据设置到表单中。

柳暗花明：拨云见日的解决方案

现在，我们已经知道了回显失败的原因——给定键值对中的字段名称没有在表单的字段元数据中找到。要解决这个问题，我们需要确保在使用setFieldsValue方法之前，已经将字段添加到表单的字段元数据中。

import { Form, Input } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const initialValues = {
    name: 'John Doe',
    age: 25,
  };

  useEffect(() => {
    form.setFields([
      {
        name: 'name',
        value: initialValues.name,
      },
      {
        name: 'age',
        value: initialValues.age,
      },
    ]);
  }, []);

  return (
    <Form form={form}>
      <Form.Item
        label="Name"
        name="name"
        rules={[{ required: true, message: 'Please input your name!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Age"
        name="age"
        rules={[{ required: true, message: 'Please input your age!' }]}
      >
        <Input />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
};

export default MyForm;