React Hook更新状态后Form表单无法自动填充关联字段如何解决？

你遇到的问题核心是Ant Design Form组件的initialValues属性仅在组件首次挂载时生效，后续你更新settings状态时，表单不会自动响应这个状态变化回填数据。除此之外你的代码还有几处不符合React规范的写法，也会导致逻辑异常。

修改方案如下：

1. 通过Form.useForm()获取表单实例，调用表单提供的API主动更新字段值
2. 修正冗余的错误写法
3. 删除无效的冗余逻辑

修改后的完整代码：

const { Option, OptGroup } = Select;
const SettingsViewComponent: React.FC<{ base_instruments: any }> = props => {
  // 新增：获取表单实例
  const [form] = Form.useForm();
  let [settings, setSettings] = React.useState<ISettings>();
  const instSearch = props.base_instruments;

  // 组件初始化请求默认配置
  React.useEffect(() => {
    async function fetchsettings(insId = 0) {
      const rsp = await getSettings(insId);
      setSettings(rsp.data);
      // 初始化时给表单赋值
      form.setFieldsValue(rsp.data);
    }
    fetchsettings()
  }, [form]);

  const onInstrumentSelected = async (value, option) => {
    const stt= await getSettings(option.value);
    if (stt!= null) {
      console.log(stt.data);
      setSettings(stt.data);
      // 新增：主动调用表单API回填所有字段
      form.setFieldsValue(stt.data);
    } else {
      message.error('error');
    }
  };

  return !settings ? (
    <div />
  ) : (
    // 新增：绑定form属性到Form组件
    <Form
      form={form}
      initialValues={settings}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}>
      <Form.Item label="instrument" name="instrumentId">
        <Select onSelect={(val, op) => onInstrumentSelected(val, op)}>
          {instOptions}
        </Select>
      </Form.Item>
      <Form.Item label="Field 1" name="field1" >
        <Input />
      </Form.Item>
      <Form.Item label="Field 2" name="field2" >
        <Input />
      </Form.Item>
      <Form.Item label="Field3" name="field3">
        <Input />
      </Form.Item>
    </Form>);
};
export default SettingsViewComponent;

关键修改说明：

• 原来的insId是普通变量，不是React状态，修改它不会触发组件重渲染，也没法触发绑定了它为依赖的useEffect执行，原逻辑里的useEffect只有组件首次挂载时会执行一次，后续选择其他instrument的时候不会触发，所以直接去掉了这个无效变量和对应依赖逻辑，直接在选中回调里请求数据即可
• 直接给settings赋值的写法是错误的，React state必须通过setSettings修改，所以删掉了这行冗余代码
• 所有需要更新表单值的场景（初始化、选中instrument后）都主动调用form.setFieldsValue传入最新数据，即可实现字段自动回填

内容的提问来源于stack exchange，提问作者Bheid