reactjs - Redux 形式 : REGISTER_FIELD/UNREGISTER_FIELD get called after change or focus events

Question

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

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

此外，字段数组是使用初始值构建的。

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

问题是表单中的所有字段都会在每次更改或焦点上取消注册和注册事件。如果没有 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

如果有人仍然遇到问题，我在 FieldArray 上遇到了类似的问题，我的解决方案是完全删除 bind 并将其放入它自己的组件中，这样它就不会' t 重新渲染数组。它必须位于渲染它的组件之外 -

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>
    )
  }
}