Redux-Form中通过编程方式修改FieldArray的值

我来帮你梳理下这个问题的解决思路，你现在遇到的核心问题是在FieldArray里跨字段同步时，字段路径构造错误，以及没有正确获取实时输入的字段值。

问题分析 #

你当前的代码里有两个关键问题：

1. 字段路径错误：${props.member}.firstName这种写法无法正确指向FieldArray里的具体字段，Redux-Form中FieldArray的字段路径格式应该是数组名[索引].字段名，比如members[0].firstName。
2. 值获取方式不对：this.props.hasLastName没办法实时拿到当前输入的姓氏值，应该从输入事件中直接获取最新的value。

具体解决步骤 #

1. 导入Redux-Form的change action
   确保你已经正确导入了change方法：

   import { change } from 'redux-form';
   

2. 编写字段同步的处理函数
   在你的组件里添加一个处理姓氏变化的函数，接收输入事件和当前成员的索引，然后用dispatch(change)同步到对应的名字字段：

   handleLastNameChange = (e, index) => {
     // 拿到当前输入的姓氏值
     const lastNameValue = e.target.value;
     // 同步到对应成员的firstName字段
     this.props.dispatch(
       change(
         "FieldArraysForm", // 你的表单名称
         `members[${index}].firstName`, // 正确的目标字段路径
         lastNameValue // 要同步的值
       )
     );
   };
   

3. 在FieldArray的字段中绑定处理函数
   渲染FieldArray里的姓氏字段时，把当前成员的索引传递给onChange处理函数：

   <Field
     name={`members[${index}].lastName`}
     component={renderField}
     label="Last Name"
     onChange={(e) => this.handleLastNameChange(e, index)}
   />
   

验证效果 #

这样修改后，当你添加新成员，在姓氏字段输入内容时，对应的名字字段就会自动同步显示相同的内容了。

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