React Redux类组件mapStateToProps错误

Question

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

显示控制台错误

函数作为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
    }
} 

商店. 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);

应用内。js：整个容器用提供者包装，存储作为道具传递

Answer 1

你已经命名了你的状态，你的行动都算数，后者是作为道具注入的那个。

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

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

提供不同的名称，状态计数，操作可能递增。

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

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