【问题标题】：React-Redux Class Component mapStateToProps errorReact-Redux 类组件 mapStateToProps 错误
【发布时间】：2021-05-08 11:47:11
【问题描述】：

无法访问 Class 组件中的 redux 存储当前状态。

显示控制台错误

函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者您可能打算调用这个函数而不是返回它。

当我尝试使用带有 useSelector 和 useDispatch 的功能组件来实现相同功能时，一切都按预期工作。这里出了什么问题？

reducer.js

let initialState={
    count:0
}

const reducer=(state=initialState,action)=>{
    switch(action.type){
        case ADD_INCREMENT:
            return {
                ...state,
                count:state.count+1
            };
        default: return state;
    }
}

export default reducer;

action.js

const Increment=()=>{
    return {
        type:ADD_INCREMENT
    }
}

store.js

import reducer from './reducer';

const store=createStore(reducer);

export default store;

类组件

 import { connect } from 'react-redux';
    
    const mapStateToProps=state=>{
        return {
            count:state.count
        }
    }

const mapDispatchToProps=(dispatch)=>{
    return {
        count:()=>dispatch(action.Increment())
    }
}
    
    class Orders extends Component {
        render() {
            return (
                <div>
                    <h1>Count: {this.props.count} </h1>
                </div>
            );
        }
    }
    
    export default connect(mapStateToProps,mapDispatchToProps)(Orders);

在 App.js 中，整个容器用 Provider 包装，store 作为 props 传递

【问题讨论】：

这能回答你的问题吗？ Functions are not valid as a React child. This may happen if you return a Component instead of from render 阅读更多关于 React 基础知识

标签： javascript reactjs redux react-redux

【解决方案1】：

问题

您已将状态和操作都命名为 count，后者是作为道具注入的。

const mapStateToProps = state => {
    return {
        count: state.count  // <-- name conflict
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        count: () => dispatch(action.Increment()) // <-- name conflict
    }
}

解决方案

提供不同的名称，count 表示状态，也许increment 表示动作。

const mapStateToProps = state => ({
  count: state.count,
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch(action.Increment())
})

【讨论】：