嘗試運行時出現“TypeError：無法獲取未定義或 null 參考的屬性‘年齡’”

Question

如果分別單擊 ADD 按鈕或 SUBTRACT 按鈕，我的應用程序應該只是增加年齡（初始化為 20）或減少年齡。

我不明白為什么我不斷收到此錯誤。 我簽入 reducer.js 以確保相應地使用“年齡”屬性初始化 state，所以我完全不知道可能導致這種情況的原因。 我仔細檢查了所有正確的依賴項，並確保所有語法都正確。

我認為可能導致它的另一件事是我沒有在 reducer.js 中使用擴展運算符作為代碼行const newState = {state} 。 出於某種原因，vscode 不允許我使用擴展運算符。 每次我執行並運行我的應用程序時，屏幕上都不會出現任何內容。 是否需要安裝依賴項才能使用擴展運算符？

以下是我的代碼：

// 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')
);

// 應用程序.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);

// 減速器.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

快速修復，您可以使用Object.assign代替傳播運算符：

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

---

要使用擴展運算符，您必須檢查幾件事：

首先確保@babel/plugin-proposal-object-rest-spread依賴項在package.json中，然后將其添加到 babel 配置文件的插件中：

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

欲了解更多信息，請訪問babel rest 傳播

Answer 2

我在這里看到三個問題：

• 您將 newState 聲明為 {state}。 這將在 object 中創建 object。
• 由於您使用 const 聲明 newState，因此無法更改。 但是你在這兩種情況下都試圖改變 newState 。
• 您不會向 state 返還任何東西。 redux 的主要思想是通過返回新的 state 來更新 state。

Answer 3

newState 看起來像你定義它的方式：

{
  state: {
    age: 20
  }
}

這就是年齡未定義的原因，它不是直接子屬性。

例如：

const letters = { alpha: 'a' }

const spreadLetters = { letters }

spreadLetters 將是一個新的 object，具有一個屬性“字母”。 此屬性的值將是原始字母變量的精確副本。

{
  letters: {
    alpha: a
  }
}