Reactjs Redux Form v6-生成具有唯一键的动态表单时，会失去对输入值的关注

希望有人知道问题所在。 我有这样一个数组：

let fields = [
    { name: 'email', type: 'email', placeholder: 'Email', component: FeedbackInput },
    { name: 'password', type: 'password', placeholder: 'Passwort', component: FeedbackInput }
];

我想通过以下方式在我的redux表单中呈现它：

<form onSubmit={ handleSubmit(this.props.startAnimation.bind(this, 'animatedBtnConfig')) }>
 <fieldset>
  { fields.map(field => <Field key={_.uniqueId('field_')}  { ...field } component={ FeedbackInput } />) }
 </fieldset>
 <fieldset className="center">
  <AnimatedButtonRedux />
 </fieldset>
</form>

{fields.map（field=>）}

所以问题是表单的初始值是有效的，我只能输入1个字符。然后，它从输入字段中松开焦点，必须再次单击它

当我尝试使用“FieldArray”时也遇到了同样的问题：

动态字段组件：

export default props => {
  console.log("Dynamic Fields: ", props);
  return (
    <div>
      { props.fields.map(field => <Field key={_.uniqueId('field_')} { ...field }  />) }
    </div>
  );
};

导出默认道具=>{
log（“动态字段：”，道具）；
返回(
{props.fields.map（field=>）}
);
};

相反，当我这样尝试时：

<Field { ...fields[0] } />
<Field { ...fields[1] } />
<Field { ...fields[2] } />

很好用

当我查看DOM时，在devtool中看不到任何差异。

---

为什么redux表单的行为是这样的？我想不出来。如果有人能给我解决这个问题的关键技巧，我会非常感激

发生这种情况是因为

唯一id

作为

键

提供给

字段

组件，如

键={{uniqueId（'Field'）}

因此，无论何时重新渲染组件，react都会检查

键

以呈现DOM，因为每次渲染组件和

映射

函数运行时，

键

都是唯一生成的，您的

字段

组件每次都会被替换为新组件，因此您会看到此问题

虽然您需要设置密钥，并且该密钥在文档中应该是唯一的，但在每次渲染时都应保持不变

所以把钥匙换成

<fieldset>
  { fields.map((field, index) => <Field key={index}  { ...field } component={ FeedbackInput } />) }
 </fieldset>

{fields.map（（字段，索引）=>）}

非常感谢您的清晰解释。它起作用了！！现在我知道后面发生了什么。

<fieldset>
  { fields.map((field, index) => <Field key={index}  { ...field } component={ FeedbackInput } />) }
 </fieldset>