尝试跑步时"TypeError: Unable to get property 'age' of undefined or null reference"

Question

我的应用程序只是应该分别增加年龄(初始化为 20(或减少年龄。

我不明白为什么我总是收到此错误。我检查了 reducer.js以确保相应地使用"age"属性初始化状态，所以我完全不知道可能导致这种情况的原因。我仔细检查了我是否具有所有正确的依赖项，并确保所有语法正确。

我认为可能导致它的另一件事是我没有在我的化简器中使用传播运算符.js用于代码行const newState = {state}。出于某种原因，vscode 不允许我使用点差运算符。每次我执行并运行我的应用程序时，屏幕上都不会显示任何内容。是否需要安装依赖项才能使用扩展运算符？

以下是我的代码：

索引.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 Spread

Answer 2

我在这里看到三个问题：

• 您正在将 newState 声明为 {state}。这将在对象中创建对象。
• 由于您使用 const 声明 newState，因此无法更改它。但是你正试图在你的两种情况下改变 newState。
• 你没有向国家归还任何东西。redux 的主要思想是通过返回新状态来更新状态。

Answer 3

newState看起来像这样定义它：

{
state: {
age: 20
}
}

这就是为什么年龄是不确定的，它不是一个直接的子属性。

例如：

const letters = { alpha: 'a' }
const spreadLetters = { letters }

spreadLetters 将是一个新的对象，有一个属性，"letters"。 此属性的值将是原始字母变量的精确副本。

{
letters: {
alpha: a
}
}