Redux Form v6 - 使用唯一键生成动态表单失去了对输入值的关注

Question

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

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>

所以问题是表格是初始有效的，我只能输入 1 个字符。然后它会失去输入字段的焦点，必须再次单击它。

当我用 "FieldArray" 尝试时出现同样的问题：

<FieldArray name="authData" component={ DynamicFields } fields={ fields } />

动态字段组件：

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

相反，当我这样尝试时：

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

效果很好。

当我查看 DOM 时，我看不出开发工具有任何区别。为什么 redux 表单会这样？我想不通。如果有人能给我解决这个问题的关键提示，我将不胜感激！

Answer 1

发生这种情况是因为 unique id 作为 key 提供给 Field 组件，例如 key={_.uniqueId('field_')}

因此，每当您的组件被重新渲染时，React 会检查 key 以渲染 DOM，现在因为您的 key 是每次渲染组件时唯一生成的并且 map 函数运行，您的 Field 组件每次都会被新组件替换，因此您会看到这个问题。

尽管您需要设置密钥并且它在整个文档中应该是唯一的，但它应该在每次渲染时保持相同。

所以把密钥改成

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

Redux Form v6 - 使用唯一键生成动态表单失去了对输入值的关注

Redux Form v6 - Generating dynamic form with unique keys loses focus on entering value

reactjs

redux-form

react-redux-form