Redux Form v6 — создание динамической формы с уникальными ключами теряет фокус на вводе значения

надеюсь, что кто-то знает, в чем проблема. У меня есть массив вроде:

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

И я хочу отобразить его в моей форме редукса через:

<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] } />

Это работает хорошо.

Я не вижу никакой разницы в devtool, когда смотрю на DOM. Почему редукционная форма ведет себя так? Я не могу понять это. Я был бы очень признателен, если бы кто-то мог дать мне важный совет для решения этой проблемы!


reactjs redux-form react-redux-form
person codelifter    schedule 27.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это происходит из-за unique id, который вы предоставляете как key компоненту Field, например key={_.uniqueId('field_')}.

Итак, что происходит, когда ваш компонент перерисовывается, реакция проверяет key для рендеринга DOM, теперь, поскольку ваш key уникально генерируется каждый раз, когда компонент визуализируется и функция map запускается, ваш компонент Field заменяется каждый раз новым и, следовательно, вы видите эту проблему.

Хотя вам нужно установить ключ, и он должен быть уникальным для всего документа, он должен оставаться одинаковым при каждом рендеринге.

Поэтому измените ключ на

<fieldset>
  { fields.map((field, index) => <Field key={index}  { ...field } component={ FeedbackInput } />) }
 </fieldset>
person Shubham Khatri    schedule 27.07.2017
comment
Большое спасибо за ясное объяснение. Оно работает!! Теперь я знаю, что происходит позади. - person codelifter; 27.07.2017