在页面上管理多个 redux 表单 [英] Manage multiple redux form on page

问题描述

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

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

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

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

工作代码示例见，

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

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

解决方案

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

<块引用>

形式:字符串[必填]

表单名称和表单状态所在位置的键安装在 redux-form reducer 下

请注意，虽然您使用 Math.random 生成唯一的 formNumber，但您在模块文件中只执行一次(请使用 console.log 以查看 formNumber 只生成一次).所以 UserForm 组件的所有实例在设计时"都被分配了相同的名称.因此，当您导入表单组件并渲染它 3 次时，所有实例都使用相同的名称.你可以说，从 redux-form 的角度来看，这 3 个表单实例实际上是同一个表单，它们使用来自 store 的相同数据.

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

<块引用>

可以在设计时"传递给 reduxForm() 或在运行时作为 props 传递给你的组件.

所以解决方案是在运行时"而不是在 reduxForm 配置中将唯一的 form 定义为组件道具:

function App() {返回 (<div className="容器"><h1 className="mb-3">用户</h1><小时/>{userData.map((user, idx) => {return <UserForm form={`form-${idx}`} key={`user_${idx}`} data={user} idx={idx}/>;})}

);}

当然从 reduxForm 配置中删除这个值:

导出默认 reduxForm({证实})(用户表单);在这里输入代码

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

由于现在所有表单实例都是相互独立的，因此您不必以这种方式定义字段名称:name={`firstName_${idx}`}.你可以这样做:name='firstName'

I have user data coming from back-end as an array of objects,

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

I am using a redux-form component to render these data.

tried to make the object keys dynamic by binding index to it, but then got unsure how to handle validation, data population etc.

Working code sample can be seen at,

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

Now changing a field in on 1 form affects the other forms state. like after entering value in one field, all 'clear values' buttons get enabled.

解决方案

The problem is that all your forms are actually assigned the same name (form property value) when you call reduxForm. This property is treated as unique form identifier so that data for specific form can be get from store. According to docs:

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

Please note that although you generate unique formNumber using Math.random you're doing it only once in module file (please use console.log to see that formNumber is generated only once). So all instances of the UserForm component are assigned the same name at 'design time'. As a result when you then import form component and render it 3 times all instance use the same name. You can say that from redux-form point of view all these 3 form instances are actually the same single form and they use the same data from store.

According to redux-form docs all reduxForm config options

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

So solution is to define unique form as a component prop at 'runtime' instead of in 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>
  );
}

And of course remove this value from reduxForm config:

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

This way all form instances are independent.

Since now all form instances are independent of each other you don't have to define field names this way: name={`firstName_${idx}`}. You can do it like this: name='firstName'

这篇关于在页面上管理多个 redux 表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！