在页面上管理多个 redux 表单

Question

我有来自后端的用户数据作为对象数组，

[{firstname: 'John', lastname: 'Doe'}, {firstname: 'Jane', lastname: 'Doe'}]

我正在使用 redux-form 组件来呈现这些数据。

试图通过绑定索引来使对象键动态化，但后来不确定如何处理验证、数据填充等。

可以在

查看工作代码示例

https://codesandbox.io/s/determined-lake-ln25c

现在更改一个表单中的字段会影响其他表单状态。就像在一个字段中输入值后，所有 'clear values' 按钮都会启用。

Answer 1

问题是当您调用 reduxForm 时，您的所有表单实际上都分配了相同的名称（form 属性值）。此属性被视为唯一的表单标识符，以便可以从商店获取特定表单的数据。根据文档：

form: string [required]

the name of your form and the key to where your form's state will be mounted under the redux-form reducer

请注意，虽然您使用 Math.random 生成了唯一的 formNumber，但您在模块文件中只做了一次（请使用 console.log 看到 formNumber 只生成一次）。因此 UserForm 组件的所有实例都在 'design time' 处分配了相同的名称。结果，当您随后导入表单组件并将其呈现 3 次时，所有实例都使用相同的名称。您可以说，从 redux-form 的角度来看，所有这 3 个表单实例实际上是同一个表单，并且它们使用来自商店的相同数据。

根据 redux-form 文档，所有 reduxForm 配置选项

may be passed into reduxForm() at "design time" or passed in as props to your component at runtime.

所以解决方案是将唯一的 form 定义为 'runtime' 中的组件属性，而不是 reduxForm config:

function App() {
  return (
    <div className="container">
      <h1 className="mb-3">Users</h1>
      <hr />
      {userData.map((user, idx) => {
        return <UserForm form={`form-${idx}`} key={`user_${idx}`} data={user} idx={idx} />;
      })}
    </div>
  );
}

当然，从 reduxForm 配置中删除此值：

export default reduxForm({
  validate
})(UserForm);
enter code here

这样所有表单实例都是独立的。

从现在开始，所有表单实例都相互独立，您不必以这种方式定义字段名称： name={`firstName_${idx}`}。你可以这样做： name='firstName'

在页面上管理多个 redux 表单

Manage multiple redux form on page

reactjs

redux-form