Результирующая форма: REGISTER_FIELD/UNREGISTER_FIELD вызывается после событий изменения или фокуса

Question

Я использую форму Redux для визуализации и обработки событий формы в приложении React. Используются следующие вещи:

• Начальные значения
• Полевые массивы
• Immutable.js
• Материал UI

Кроме того, полевые массивы строят, используя начальные значения.

export default connect(
    state => { 
    return { 
     buttonVisible, 
     confirm, 
     initialValues: Immutable.Map({ 
     configuration_items: configuration_items, 
     }) 
    } 
    } 
)(AssetConfiguration) 

Проблема заключается в том, что все поля в форме получить и с учетом зарегистрированные на каждыеchange или focus событий. Без defaultValues, кажется, все работает нормально.

Я использую Реагировать компонент для придания формы, что-то вроде этого

class ConfigurationForm extends React.Component { 
    renderTableBody({ fields, meta: { touched, error } }) { 
    return(
     <tbody> 
     {fields.map((field, index) => { 
      return(
      <tr key={index}> 
       <td> 
       <Field fieldIndex={index} name={`${field}.value`} id={`${field}.value`} component={this.renderItemField.bind(this)} /> 
       </td> 
      </tr> 
     ) 
     })} 
     </tbody> 
    ) 
    } 

render() { 
    return (
     <form className="defaultForm" onSubmit={handleSubmit(postAssetConfiguration)}> 
     <FieldArray name="configuration_items" component={this.renderTableBody.bind(this)} /> 
     </form> 
    ) 
    } 
} 

Что может быть проблема?

Спасибо, Rens

Answer 1

Я расследую подобный вопрос. Мое предположение: вы проходите в this.renderTableBody.bind(this) и this.renderItemField.bind(this) как компоненты. Каждый раз, когда вызывается рендер, это будут новые ссылки, вызывая ненужное повторение. Это считается плохой практикой: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

Answer 2

Если кто-то по-прежнему возникают проблемы, у меня был аналогичная проблема с FieldArray и моим решением было удалить bind полностью и поместить его в его собственном компоненте, так что он не пересборки массива. Он должен находиться за пределами компонента, который его выполняет -