Redux表单：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> 
    ) 
    } 
} 

可能是什么问题就在这里？

感谢， 伦斯

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，并把它放在它自己的组件，因此它不会重新渲染阵列。它必须在渲染它的组件之外 -

const renderItemField = ({ input }) => { 
    return (
    <div> 
     <input {...input} /> 
    </div> 
); 
}; 

const 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={renderItemField} /> 
      </td> 
      </tr> 
     ) 
     })} 
    </tbody> 
) 
}; 

class ConfigurationForm extends React.Component { 
    render() { 
    return (
     <form className="defaultForm" onSubmit={handleSubmit(postAssetConfiguration)}> 
     <FieldArray name="configuration_items" component={renderTableBody} /> 
     </form> 
    ) 
    } 
}