Antd表单Form.List动态操作列，动态修改值

背景：React+TypeScript+Umi+Antd

Antd官网的用例：

<Form.List name="sights">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...field }) => (    
              //key:number，相当于序列数，不随删除而改变； 
              //name：number，相当于下标，随着删除而更新！！！（需要用到下标要用name）; 
              //field:{"isListField":true,"fieldKey":0}

              <Space key={field.key} align="baseline">
                <Form.Item>
                  //内容
                </Form.Item>
                <Form.Item
                  {...field}
                  label="Price"
                  name={[field.name, 'price']}
                  rules={[{ required: true, message: 'Missing price' }]}
                >
                  //内容
                </Form.Item>

                <MinusCircleOutlined onClick={() => remove(field.name)} />    //删除行
              </Space>
            ))}

            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                添加
              </Button>    //添加行
            </Form.Item>
          </>
        )}
      </Form.List>

效果图：

首先，动态操作列的方法：

//新建
add();    //可填参数，不填默认往form的field值push一个undefined
add({ text: '' , value: '' });    //填则push填入内容


//删除
remove(name);    //name为form.list自带属性，相当于操作的行的下标

其次，动态修改值的方法：

const formatFormListValue = (
    listName: string,  //form.list的名称，name属性的值
    e: any,  //这里可以是各种交互元素的event
    index: number, //form.list的name，也就是需要操作的行的索引
    fieldName?: string, //具体操作list的哪一项字段
  ) => {
    let formData = form?.getFieldsValue();
    formData[listName].map((item: { [x: string]: any }, eindex: any) => {
      if (index === eindex) {
        if (fieldName) {
          item[fieldName] = e;
        } else {
          item = {};
        }
      }
    });
    form?.setFieldsValue(formData); //这一步很关键，不添加可能会导致视图不刷新
    return;
  };

如果有更好的办法，请指教，谢谢！