React Antd Modal Form 数据新增问题解决方案

可能的原因是在 handleSave 方法中，获取 fieldsValue 的时候没有包含新增的一行数据。可以尝试修改 handleSave 方法中的代码，将获取 fieldsValue 的逻辑放在循环外面，然后在循环内部获取每一行的数据。

修改后的 handleSave 方法如下所示：

handleSave = () => {
  const { form, okChange, index, record, filterList } = this.props;
  const { formVals, keyId } = this.state;
  form.validateFields((err, fieldsValue) => {
    if (err) return;

    const arrData = fieldsValue.content.reduce((arr, next) => {
      const typeList = next.type.map(type => {
        return { type, name: next.name };
      });
      return arr.concat(typeList);
    }, []);

    const nameValue = (filterList || []).find(item => item.id === keyId)?.title;
    const formItem = {
      key: keyId || formVals?.key,
      value: fieldsValue?.value || nameValue,
      typeList: arrData,
    };
    console.log(formItem, 80);
    okChange(formItem, index);
    this.handleVisible();
  });
};

这样在循环内部的 getFieldValue('content') 方法就可以正确获取到每一行的数据，确保新增的一行数据也被包含在 fieldsValue 中，从而保证新增的一行数据能够正确展示。