尽管设置了初始状态,ReactJs 仍然无法读取未定义的属性“map”?
我在我的应用程序中使用 Redux。
我在 Reducer 中设置了初始状态,但显然有些地方不正确,因为我收到以下错误:
Uncaught TypeError:无法读取未定义的属性“map”
这是 Reducer:
const initialState = {
machines: [
{
id: "1",
identifier: "My Machine 1",
location: "My Location 1"
}
]
};
export default function machines(state=initialState, action) {
switch (action.type) {
default:
return state;
}
}
这是组件:
import React, { Component } from 'react';
import {connect} from 'react-redux';
class Machines extends Component {
createMachinesList() {
return this.props.machines.map((machine) => {
return (
<table>
<tbody>
<tr>
<td key={machine.id}>{machine.identifier}</td>
</tr>
<tr>
<td key={machine.id}>{machine.location}</td>
</tr>
</tbody>
</table>
);
});
}
render() {
return (
<div>
<div className="card">
<div className="card-header">
Equipment
</div>
<div className="card-content">
{this.createMachinesList()}
<button>edit</button><button>delete</button>
</div>
</div>
</div>
)
}
}
const mapStateToProps = state => {
return {
equipment: state.machines,
}
}
const mapDispatchToProps = dispatch => {
return {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Machines);
这是 Reducers/index.js
import { combineReducers } from 'redux';
import machines from "./machines";
const allReducers = combineReducers({
machines,
})
export default allReducers;
以及 index.js 内部
let store = createStore(allReducers);
ReactDOM.render(
<Provider store={store}>
<HashRouter>
<Switch>
{indexRoutes.map((prop, key) => {
return <Route to={prop.path} component={prop.component} key={key} />;
})}
</Switch>
</HashRouter>
</Provider>,
document.getElementById("root")
);
编辑:
我已按照以下建议将 mapStatetoProp 中的“equipment”替换为“machines”。我现在得到了一个不同的错误:
Uncaught TypeError:this.props.machines.map 不是一个函数
我需要改变什么?我被困在这个问题上了。
提前非常感谢!
您将减速器“机器”映射到名为设备的道具。您需要执行此操作。props.equipment.machines.map
如果您不选择特定的,好的,命名redux状态可能会令人困惑:)
您有一个全局状态,即
状态
。您在那里有一个还原器,并拥有一个是对象的状态,并且它具有名为
Machines
。
的属性再次函数为
机器
。现在您有类似的东西。
-
状态
:全局状态 -
state.machines
:机器状态处于您的全局状态,您将使用还原器初始化。 -
state.machines.machines
:这是保存您的数组的对象属性。
这很令人困惑:)但是,这还不够困惑,我相信,因为您在第一个版本中使用了
mapstatetoprops
函数:
929183890
您在这里做什么?您将
state.machines
状态打开,以
设备
为组件。然后,如果要到达
机器
属性,则应在此处使用
this.props.equipment.machines
。因此,如果您使用 @Borube的建议,您将解决问题。这就是为什么我向他/她的答案投票,但我想确定并要求您的其他配置。
现在,您更改了
mapstatetoprops
这样:
803115120
您现在拥有的是:
state.machines.machines
。您应该使用
this.props.machines.machines
。
再次,选择更好的名称可能很有用:)
在注释后更新
是的,这很有趣。当我在学习redux时犯同样的错误:)
state.somestate.somestate.foo.bar
哦,天哪,我也对自己笑了。然后我试图思考更好的名字。
这完全取决于您。您的还原器定义是什么?想想一个好的,通用的名称(当然是此还原状态的通用),然后在此状态下使用属性。
我在这里不知道您的最终愿望,但是您使用
设备
一次,那么状态名称可以是
设备
哪个是复数的?然后,您将来将拥有一个状态和一个类似的还原器?
239268889
现在,当您使用此状态时,您将使用以下方式到达每个设备:
this.props.props .equipments.machines
,
this.props.equipments.cars
等。成为这样的事情:
568032127
,您将以
this.props.machines [0]
或映射以获取所有项目对于此数组。如果您只保留在这里的机器,那么您也许可以使用这种方式。但是,如果还有其他设备,使其成为对象可能更好。
在
mapStateToProps
中将设备名称更改为
machines
>