带有 formValueSelector 的多个 Redux-form答案

【问题标题】：multiple Redux-form with formValueSelector带有 formValueSelector 的多个 Redux-form
【发布时间】：2019-10-31 06:49:25
【问题描述】：

我正在尝试创建多个具有可靠下拉列表的表单。根据对 dropdown1 的选择，会显示一些字段并填充另一个下拉列表。

要实现多个表单，我必须传递一个唯一的表单键，例如：

panels.map(panel =>
  <PanelForm key={panel.uuid} form={`PanelForm_${panel.uuid}`} />
)

但是，要连接到状态以进行更改，我必须使用 redux formValueSelector 需要将其设置为传递的表单名称，这是动态的，我不知道如何在此处传递它...

const selector = formValueSelector('PanelForm_XXXX')
                                    ^^^^^^^^^^^^^^
const FormConnectDecorator = connect((state) => {
  const category = selector(state, 'category')
  return {
    category,
  }
})(Form)

const FormDecoratedComponent = reduxForm()(FormConnectDecorator)

我需要将表单连接到 redux 状态以读取类别值，但似乎无法将正确的动态表单名称值传递给它。

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

浏览了一下，formValueSelector返回一个函数，解决方法是在mapStateToProps中使用。归功于 https://github.com/erikras/redux-form/issues/1987 上的 rizedr

const mapStateToProps = (state, initialProps) => {
  return {
    category: (formValueSelector(initialProps.form))(state, 'category'),
  };
};
const FormConnectDecorator = connect(mapStateToProps)(Form)

const FormDecoratedComponent = reduxForm()(FormConnectDecorator)

export default FormDecoratedComponent

@Mods - 如果您愿意，请随时删除此问题。答案已存在于 redux 形式的 github 已关闭问题中，上面提供了链接。

【讨论】：