Redux表单：REGISTER_FIELD / UNREGISTER_FIELD在更改或焦点事件后被调用

Question

我正在使用Redux Form在我的React应用程序中渲染和处理表单事件。使用以下内容：

• 初始值
• 字段数组
• Immutable.js
• 材质用户界面

同样，使用初始值构建字段数组。

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

问题是，所有的表单字段得到注销和注册上的每一个 change或focus事件。如果没有defaultValues，它似乎可以正常运行。

我正在使用React组件来渲染表单，像这样

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)作为组件。每次调用 render 时，这些都将是新的引用，从而触发不必要的重新渲染。这被认为是不好的做法：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md