Javascript 正面类型错误：无法读取属性'；柜台'；在React中使用Redux时未定义的

我是Redux新手，正在学习如何在React中正确使用它。但我面临的问题是“TypeError:无法读取未定义的属性‘counter’”。以下是我正在使用的代码： 我是Redux新手，正在学习如何在React中正确使用它。但我面临的问题是“TypeError:无法读取未定义的属性‘counter’”。以下是我正在使用的代码：

reducer.js
    >     
    >         const initialState = {
    >           counter: 0
    >         };
    >         
    >         const reducer = (state = initialState, action) => {
    >           if (action.type === "INCREMENT") {
    >             counter: state.counter + 1;
    >           }
    >         };
    >         
    >         export default reducer;

Counter.js
    >     
    >         import React, { Component } from "react";
    >         import { connect } from "react-redux";
    >         
    >         import CounterControl from "../../components/CounterControl/CounterControl";
    >         import CounterOutput from "../../components/CounterOutput/CounterOutput";
    >         
    >         class Counter extends Component {
    >           counterChangedHandler = (action, value) => {
    >             switch (action) {
    >               case "inc":
    >                 this.setState(prevState => {
    >                   return { counter: prevState.counter + 1 };
    >                 });
    >                 break;
    >               case "dec":
    >                 this.setState(prevState => {
    >                   return { counter: prevState.counter - 1 };
    >                 });
    >                 break;
    >               case "add":
    >                 this.setState(prevState => {
    >                   return { counter: prevState.counter + value };
    >                 });
    >                 break;
    >               case "sub":
    >                 this.setState(prevState => {
    >                   return { counter: prevState.counter - value };
    >                 });
    >                 break;
    >             }
    >           };
    >         
    >           render() {
    >             return (
    >               <div>
    >                 <CounterOutput value={this.props.ctr} />
    >                 <CounterControl
    >                   label="Increment"
    >                   clicked={() => this.props.onIncrement}
    >                 />
    >                 <CounterControl
    >                   label="Decrement"
    >                   clicked={() => this.counterChangedHandler("dec")}
    >                 />
    >                 <CounterControl
    >                   label="Add 5"
    >                   clicked={() => this.counterChangedHandler("add", 5)}
    >                 />
    >                 <CounterControl
    >                   label="Subtract 5"
    >                   clicked={() => this.counterChangedHandler("sub", 5)}
    >                 />
    >               </div>
    >             );
    >           }
    >         }
    >         
    >         const mapStateToProps = state => {  //here it shows an error
    >           return { ctr: state.counter };
    >         };
    >         
    >         const mapDispatchToProps = dispatch => 
    >           return {
    >             onIncrement: () => dispatch({ type: "INCREMENT" })
    >           };
    >         };
    >         
    >         export default connect(
    >           mapStateToProps,
    >           mapDispatchToProps
    >         )(Counter);

index.js
    >     
    >         import React from "react";
    >         import ReactDOM from "react-dom";
    >         import "./index.css";
    >         import App from "./App";
    >         import registerServiceWorker from "./registerServiceWorker";
    >         import { createStore } from "redux";
    >         import reducer from "./store/reducer";
    >         import { Provider } from "react-redux";
    >         
    >         const store = createStore(reducer);
    >         ReactDOM.render(
    >           <Provider store={store}>
    >             <App />
    >           </Provider>,
    >           document.getElementById("root")
    >         );
    >         registerServiceWorker();

reducer.js
>     
>常量初始状态={
>柜台:0
>         };
>         
>const reducer=（state=initialState，action）=>{
>如果（action.type==“增量”）{
>计数器：state.counter+1；
>           }
>         };
>         
>导出默认减速机；
Counter.js
>     
>从“React”导入React，{Component}；
>从“react redux”导入{connect}；
>         
>从“../../components/CounterControl/CounterControl”导入CounterControl；
>从“../../components/CounterOutput/CounterOutput”导入计数器输出；
>         
>类计数器扩展组件{
>counterChangedHandler=（操作、值）=>{
>开关（动作）{
>案例“公司”：
>this.setState（prevState=>{
>返回{counter:prevState.counter+1}；
>                 });
>中断；
>案例“dec”：
>this.setState（prevState=>{
>返回{counter:prevState.counter-1}；
>                 });
>中断；
>案例“添加”：
>this.setState（prevState=>{
>返回{counter:prevState.counter+value}；
>                 });
>中断；
>案例“sub”：
>this.setState（prevState=>{
>返回{counter:prevState.counter-value}；
>                 });
>中断；
>             }
>           };
>         
>render（）{
>返回(
>               
>                 
>label=“增量”
>单击={（）=>this.props.onIncrement}
>                 />
>label=“减量”
>单击={（）=>this.counterChangedHandler（“dec”）}
>                 />
>label=“添加5”
>单击={（）=>this.counterChangedHandler（“添加”，5）}
>                 />
>label=“减去5”
>单击={（）=>this.counterChangedHandler（“sub”，5）}
>                 />
>               
>             );
>           }
>         }
>         
>const mapStateToProps=state=>{//此处显示一个错误
>返回{ctr:state.counter}；
>         };
>         
>const mapDispatchToProps=调度=>
>返回{
>onIncrement:（）=>分派（{type:“INCREMENT”}）
>           };
>         };
>         
>导出默认连接(
>MapStateTops，
>mapDispatchToProps
>）（柜台）；
index.js
>     
>从“React”导入React；
>从“react dom”导入react dom；
>导入“/index.css”；
>从“/App”导入应用程序；
>从“/registerServiceWorker”导入registerServiceWorker；
>从“redux”导入{createStore}；
>从“/store/reducer”导入减速机；
>从“react redux”导入{Provider}；
>         
>const store=createStore（reducer）；
>ReactDOM.render(
>           
>             
>           ,
>document.getElementById（“根”）
>         );
>registerServiceWorker（）；

我可以看出您的reducer定义中存在一个可能的问题（可能的语法错误），请尝试以这种方式进行更改：

const reducer=（state=initialState，action）=>{
如果（action.type==“增量”）{
返回{
……国家，
计数器：state.counter+1
};        
}
返回状态；
};

您是否意识到您的counterChangedHandler正在更改react状态（顺便说一句，您没有初始化该状态），而不是redux存储/状态？redux存储的唯一更改是使用带有label=“Increment”的CounterControl。感谢您的友好回答，我只是想问您是否使用immutable.js并使用redux重新选择。使用它们是最佳实践吗？谢谢：）我正在使用重新选择，我认为这是最佳实践。我不使用immutable.js，只使用object/arry spread运算符。但是很多人使用它，它可以保护你免于一些错误。