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个字符。然后它从输入字段中丢失焦点，并且必须再次单击它。

使用＆＃34; FieldArray＆＃34;：

进行尝试时出现同样的问题

<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时，我无法看到devtool的任何差异。为什么redux表单的行为方式如此？我无法弄明白。我真的很感激，有人可以给我一个关键的tipp来解决这个问题！

Answer 1

这是因为key提供Field作为key={_.uniqueId('field_')} key组件，例如key

所以当你的组件被重新渲染时，会发生什么事情，反应检查map以呈现DOM，因为每次渲染组件时Field都是唯一生成的<fieldset> { fields.map((field, index) => <Field key={index} { ...field } component={ FeedbackInput } />) } </fieldset> dc函数运行时，每次使用新组件替换result组件，因此您会看到此问题。

虽然您需要设置密钥，但它在文档中应该是唯一的，但在每个渲染上应该保持不变。

所以将密钥更改为

limit

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

1 个答案: