尝试运行时出现“TypeError：无法获取未定义或 null 参考的属性‘年龄’”

Question

My app is simply supposed to increase the age (initialized to 20) or decrease the age if ADD button or SUBTRACT button is clicked, respectively.

I am not understanding why I keeping getting this error. I check in reducer.js to make sure to initialize the state with the 'age' property accordingly, so I am completely lost as to what might be causing this. I double checked that I had all the right dependencies, as well as made sure all the syntax is correct.

One other thing I think might be causing it is that I am not using the spread operator in my reducer.js for the line of code const newState = {state} . For some reason, vscode is not letting me use the spread operator. Everytime I do and run my app, nothing appears on screen. Is there a dependency that needs to be installed to use the spread operator?

The following is my code:

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import reducer from './reducer';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// App.js

import React from 'react';
import './App.css';
import { connect } from 'react-redux';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <div>Age: <span>{this.props.age}</span></div>
        <button onClick={this.props.onAgeUp}>Add</button>
        <button onClick={this.props.onAgeDown}>Sub</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return { age: state.age };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onAgeUp: () => dispatch({ type: 'ADD' }),
    onAgeDown: () => dispatch({ type: 'SUBTRACT' })

  };
};

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

// reducer.js

import { ADD, SUBTRACT } from './actionTypes';

const initialState = {
  age: 20
};

const reducer = (state=initialState, action) => {
    const newState = {state};

    switch(action.type) {
        case ADD:
            newState.age+=1;
            break;
        case SUBTRACT:
            newState.age-=1;
            break;
        default:
            return state;
    }

};

export default reducer;

Answer 1

Quick fix, You can use Object.assign instead of spread operator:

const newState = Object.assign({}, state);

---

For using spread operator you must check couple of things:

first make sure @babel/plugin-proposal-object-rest-spread dependency is in package.json , then add it to plugins of babel config file:

{
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

for more info visit babel rest spread

Answer 2

I see three problems here:

• You're declaring newState as {state}. This creates object within object.
• Since you're declaring newState with const, it can not be changed. But you're trying to change newState in both of your case.
• You're not returning anything to the state. Main idea of the redux is to update the state by returning the new state.

Answer 3

newState looks like this the way you define it:

{
  state: {
    age: 20
  }
}

That's why age is undefined, it's not an immediate child property.

Eg:

const letters = { alpha: 'a' }

const spreadLetters = { letters }

spreadLetters will be a new object, with one property, "letters". The value of this property will be an exact copy of the original letters variable.

{
  letters: {
    alpha: a
  }
}