Redux Form：无法运行‘从状态初始化’示例，报TypeError错误

我来帮你搞定这个问题！核心是要正确把默认初始值和Redux状态里的Map数据合并后，作为表单的初始化值传入。下面是具体的实现步骤和代码示例：

步骤1：通过connect获取Redux状态中的Map数据 #

首先用connect从Redux store里取出你需要的Map数据，假设你的状态里有个存储目标数据的节点：

const mapStateToProps = state => ({
  // 替换成你实际的Redux状态路径
  stateMapData: state.yourTargetReducer.yourMapData,
  // 可选：同时获取表单当前值、同步错误等状态
  currentFormValues: getFormValues('yourFormName')(state),
  formSyncErrors: getFormSyncErrors('yourFormName')(state)
});

步骤2：定义默认初始值 #

在组件外部或内部定义你的基础默认值：

const defaultInitialValues = {
  username: '',
  email: '',
  age: ''
};

步骤3：合并值并传递给表单 #

这里有两种常用的实现方式，按需选择：

方式一：直接在mapStateToProps中合并，传递initialValues #

这种方式适合初始化逻辑简单的场景，状态Map数据会自动覆盖默认值：

const mapStateToProps = state => {
  const stateMapData = state.yourTargetReducer.yourMapData;
  // 合并默认值与状态数据，状态数据优先级更高
  const mergedInitialValues = {
    ...defaultInitialValues,
    ...stateMapData
  };
  return {
    initialValues: mergedInitialValues
  };
};

然后在reduxForm配置里必须开启enableReinitialize，确保状态变化时表单能重新初始化：

const formConfig = {
  form: 'yourFormName',
  enableReinitialize: true // 关键配置，不可省略
};

方式二：用initialize动作手动触发初始化 #

这种方式更灵活，适合需要条件触发初始化的场景：
首先导入initialize动作：

import { initialize, reduxForm } from 'redux-form';

然后在mapDispatchToProps中绑定动作：

const mapDispatchToProps = dispatch => ({
  initFormWithValues: (values) => dispatch(initialize('yourFormName', values))
});

最后在组件生命周期中调用合并逻辑：

componentDidMount() {
  const { stateMapData, initFormWithValues } = this.props;
  const mergedValues = { ...defaultInitialValues, ...stateMapData };
  initFormWithValues(mergedValues);
}

// 如果状态Map会动态更新，可在此监听变化
componentDidUpdate(prevProps) {
  if (prevProps.stateMapData !== this.props.stateMapData) {
    const mergedValues = { ...defaultInitialValues, ...this.props.stateMapData };
    this.props.initFormWithValues(mergedValues);
  }
}

完整示例代码 #

把以上逻辑整合起来，完整组件代码如下：

import React, { Component } from 'react';
import { getFormSyncErrors, getFormValues, reduxForm, initialize } from 'redux-form';
import { compose } from 'recompose';
import { connect } from 'react-redux';

// 默认初始值
const defaultInitialValues = {
  username: '',
  email: '',
  age: ''
};

class YourForm extends Component {
  componentDidMount() {
    // 这里用方式二的初始化逻辑，也可以换成方式一的initialValues
    const { stateMapData, initFormWithValues } = this.props;
    const mergedValues = { ...defaultInitialValues, ...stateMapData };
    initFormWithValues(mergedValues);
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>用户名</label>
          <input name="username" component="input" type="text" />
        </div>
        <div>
          <label>邮箱</label>
          <input name="email" component="input" type="email" />
        </div>
        <div>
          <label>年龄</label>
          <input name="age" component="input" type="number" />
        </div>
        <button type="submit">提交表单</button>
      </form>
    );
  }
}

const mapStateToProps = state => ({
  stateMapData: state.yourTargetReducer.yourMapData,
  currentFormValues: getFormValues('yourFormName')(state),
  formSyncErrors: getFormSyncErrors('yourFormName')(state)
});

const mapDispatchToProps = dispatch => ({
  initFormWithValues: (values) => dispatch(initialize('yourFormName', values))
});

const formConfig = {
  form: 'yourFormName',
  enableReinitialize: true
};

// 用compose组合connect与reduxForm
export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  reduxForm(formConfig)
)(YourForm);

常见问题排查 #

• 确认enableReinitialize已设为true：如果状态Map会动态变化，这个配置是表单重新初始化的前提。
• 检查状态Map的格式：Redux状态建议用普通对象而非ES6 Map（需序列化），如果是ES6 Map，先转成普通对象：const stateMapData = Object.fromEntries(state.yourReducer.yourES6Map);
• 验证connect映射：用console.log(this.props.stateMapData)确认是否正确获取到了Redux状态中的数据。

内容的提问来源于stack exchange，提问作者Vadorequest