javascript - 面对类型错误 : Cannot read property 'counter' of undefined when using Redux in React

Question

我是 Redux 的新手，正在学习如何在 React 中正确使用它。但我面临的问题是“类型错误:无法读取未定义的属性‘计数器’”。这是我正在使用的代码: 我是 Redux 的新手，正在学习如何在 React 中正确使用它。但我面临的问题是“类型错误:无法读取未定义的属性‘计数器’”。这是我正在使用的代码:

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();

Answer 1

我可以在你的 reducer 定义中看到一个可能的问题(可能是语法错误)，尝试这样改变它:

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