渲染多个独立的 redux-form答案

【问题标题】：Render multiple independent redux-form渲染多个独立的 redux-form
【发布时间】：2023-03-13 12:43:01
【问题描述】：

我想用<CustomForm/> 渲染多个<User/>，它们都是无状态组件。但是，如果我尝试修改<CustomForm /> 之一，每隔一个<CustomForm/ > 也会被修改，因为它们都共享商店的相同属性。如何拥有多个独立的<CustomForm />？

<User>
    <CustomForm user_id={user_id} />
</User>
<User>
    <CustomForm user_id={user_id}/>
</User>

我已经像这样连接了表单：

let CustomForm = (props) => {
    const { fields: {author, content}, handleSubmit } = props;

    return (
        <form action="">
            ....
        </form>
    )

}

CustomForm = reduxForm({
  form: `comment`, // I can't access props, i thought something like `comment_${props.user_id}`
  fields: ['author', 'content']
})(CustomForm)

export default CustomForm;

【问题讨论】：

LeaderBoardComments 是什么？
对不起，LeaderBoardComments 是我项目中 CustomForm 的实际名称。我已经编辑了我的问题
两个选项。要么商店需要有单独的对象来存储每个对象的数据（不是最佳的）。或者您需要为这些组件引入状态。我会推荐这个，因为组件的各个状态应该在组件本身中使用。

标签： javascript reactjs redux redux-form

【解决方案1】：

不要使用formKey，因为它正在消失。

每个传递给reduxForm() 的配置参数都可以作为道具传递，所以你可以这样做

<CustomForm form={`comment_${user_id}`}/>

【讨论】：

【解决方案2】：

您可以为组件提供 formKey 属性：

<CustomForm 
  formKey={user_id.toString()} // needs to be a string.
  user_id={user_id} 
/>

【讨论】：