React-Redux类组件使用mapStateToProps时报无效React子节点错误

报错的核心原因是mapStateToProps 与 mapDispatchToProps 定义了完全重名的 props 字段，出现了属性覆盖：

• 在mapStateToProps中，返回的count是从Redux Store取到的数值类型状态
• 在mapDispatchToProps中，返回的count是触发action的函数
  connect在合并最终传入组件的props时，mapDispatchToProps的同名字段会完全覆盖mapStateToProps的字段，最终组件内读取this.props.count时，拿到的是dispatch函数而非数值。React渲染时尝试将函数作为子节点插入DOM，就会抛出「Functions are not valid as a React child」的报错。

这也是你换用函数组件搭配useSelector、useDispatch时运行正常的原因：函数组件写法是独立拆分读取state、定义dispatch方法，不会出现同名字段覆盖的问题。

• 常量ADD_INCREMENT未定义
  reducer和action文件中直接使用了ADD_INCREMENT做类型判断，但既没有在对应文件内定义这个常量，也没有从外部导入，运行时会永远匹配不到reducer内的分支逻辑，count值永远不会更新。
• action方法未正确导出
  action文件中定义的Increment函数没有加export导出标识，类组件内引用action.Increment()时会取不到对应方法。
• 创建store时未导入createStore方法
  store.js中直接调用createStore生成store实例，但没有从redux包导入这个方法，运行时会报未定义错误。

核心是拆开两个来源的props命名，避免覆盖，同时补全缺失的导入、导出逻辑：

// 修正后的组件连接逻辑
const mapStateToProps = state => {
  return {
    count: state.count // 存储数值类型的状态值
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    // 和state字段重名会被覆盖，将dispatch方法改名为increment
    increment: () => dispatch(Increment())
  }
}

class Orders extends Component {
  // 绑定方法触发dispatch
  handleIncrement = () => {
    this.props.increment()
  }
  render() {
    return (
      <div>
        <h1>Count: {this.props.count} </h1>
        <button onClick={this.handleIncrement}>累加</button>
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Orders);

内容的提问来源于stack exchange，提问作者ima.technophyle