在redux-form中使用多个<Fields/>组件的动态字段绑定问题

这个问题其实很好解决，核心就是别硬编码字段名，而是利用Fields组件传递给你的属性来动态获取对应字段，不管你传入question1/answer1还是question2/answer2，都能自动适配。

方法一：通过names属性明确获取字段名 #

Fields组件会把你传入的names数组作为props传给自定义的组件，我们可以直接从names里取出问题和答案的字段名，再通过fields[字段名]访问对应的输入属性：

renderInputGroupField({ fields, names }) {
  // 从names数组中提取问题和答案的字段名
  const [questionFieldName, answerFieldName] = names;
  
  return (
    <div className="form-group d-block">
      <div className="form-group input-group">
        <select className="form-select">
          <option>Multiple-Choice</option>
          <option>Open-Ended</option>
        </select>
        {/* 动态绑定问题输入框 */}
        <input 
          {...fields[questionFieldName].input} 
          type="text" 
          className="form-input" 
          placeholder="Type your question..."
        />
      </div>
      <div className="form-group">
        {/* 动态绑定答案输入框 */}
        <input 
          {...fields[answerFieldName].input} 
          type="text" 
          className="form-input" 
          placeholder="Comma-separated answer choices" 
        />
      </div>
    </div>
  );
}

方法二：通过Object.values快速提取字段 #

因为你每个Fields组件都固定传入两个字段（问题在前、答案在后），所以可以直接用Object.values(fields)按顺序提取字段，写法更简洁：

renderInputGroupField({ fields }) {
  // 按names数组的顺序提取问题和答案字段
  const [questionField, answerField] = Object.values(fields);
  
  return (
    <div className="form-group d-block">
      <div className="form-group input-group">
        <select className="form-select">
          <option>Multiple-Choice</option>
          <option>Open-Ended</option>
        </select>
        <input 
          {...questionField.input} 
          type="text" 
          className="form-input" 
          placeholder="Type your question..."
        />
      </div>
      <div className="form-group">
        <input 
          {...answerField.input} 
          type="text" 
          className="form-input" 
          placeholder="Comma-separated answer choices" 
        />
      </div>
    </div>
  );
}

为什么原来的代码失效？ #

你之前硬编码了fields.question1.input，但当你传入['question2', 'answer2']时，fields对象里的key是question2和answer2，根本不存在question1这个属性，自然无法绑定到正确的输入框。上面两种方法都是基于你传入的names动态获取字段，完美适配不同的字段组。

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