[英]TypeError: Cannot read property 'map' of undefined in react-redux
Im new to React and Redux and still kinda confused a little bit. 我是React和Redux的新手,仍然有点困惑。
My goal is to render a bunch of json datas in the HTML by using GET request. 我的目标是使用GET请求在HTML中呈现一堆json数据。 I'm using react and redux to manage the state of the objects, but I believe my problem is that the data is not even there
我正在使用react和redux来管理对象的状态,但我相信我的问题是数据甚至不存在
so basically whenever someone request a URL /courses , he/she will see bunch of data in json. 所以基本上每当有人请求URL /课程时,他/她都会在json中看到大量数据。
I get the error in the component 我在组件中得到错误
TypeError: Cannot read property 'map' of undefined
TypeError:无法读取未定义的属性“map”
Here's the code 这是代码
Action 行动
export function getCourses() {
return (dispatch) => {
return fetch('/courses', {
method: 'get',
headers: { 'Content-Type', 'application/json' },
}).then((response) => {
if (response.ok) {
return response.json().then((json) => {
dispatch({
type: 'GET_COURSES',
courses: json.courses
});
})
}
});
}
}
Reducer 减速器
export default function course(state={}, action) {
switch (action.type) {
case 'GET_COURSES':
return Object.assign({}, state, {
courses: action.courses
})
default:
return state;
}
}
Component 零件
import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
class Course extends React.Component {
allCourses() {
return this.props.courses.map((course) => {
return(
<li>{ course.name }</li>
);
});
}
render() {
return (
<div>
<ul>
{ this.allCourses() }
</ul>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
courses: state.courses
}
}
export default connect(mapStateToProps)(Course);
Index reducer, where i combine everything 索引减速器,我把所有东西都结合起来
import { combineReducers } from 'redux';
import course from './course';
export default combineReducers({
course,
});
Configure Store , where i store the intial state and the reducer 配置Store,我存储初始状态和reducer
import { applyMiddleware, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
export default function configureStore(initialState) {
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(thunk),
typeof window == 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f => f
)
);
return store;
}
I believe why the data is not there is because i didn't call the action? 我相信为什么数据不存在是因为我没有调用这个动作? any help would be appreciated.
任何帮助,将不胜感激。
mapStateToProps
takes the root state as an argument (your index reducer, which is also the root reducer), not your course
reducer. mapStateToProps
将根状态作为参数(您的索引mapStateToProps
器,也是根mapStateToProps
器),而不是您的course
mapStateToProps
器。 As far as I can tell this is the structure of your store: 据我所知,这是你商店的结构:
-index <- This is the root reducer
-course
So to get the courses from that state, in your component: 因此,要从您的组件中获取该状态的课程:
// state is the state of the root reducer
const mapStateToProps = (state) => {
return {
courses: state.course.courses
}
}
Also, you might consider initialising the state of the course
reducer with an empty array of courses, so if you have to render the component before the action is fired, you won't get the error. 此外,您可以考虑使用一系列空
course
初始化course
缩减器的状态,因此如果您必须在触发操作之前渲染组件,则不会收到错误。
const initialState = {
courses: []
};
export default function course(state= initialState, action) {
...
}
Finally, you're not firing the action at all, so you will never actually get the courses, I assume you want them to be retrieved once the Course
component is loaded, for that you can use the componentDidMount
event in your component. 最后,你根本没有触发动作,所以你永远不会真正获得这些课程,我假设你希望在加载
Course
组件后检索它们,因为你可以在componentDidMount
中使用componentDidMount
事件。
First of all, you need to map the action to a property of the component 首先,您需要将操作映射到组件的属性
// Make sure you import the action
import { getCourses } from './pathToAction';
...
const mapDispatchToProps = (dispatch) => {
return {
onGetCourses: () => dispatch(getCourses())
};
}
// Connect also with the dispatcher
export default connect(masStateToProps, mapDispatchToProps)(Course);
Now call the onGetCourses
property when the component mounts 现在,在组件安装时调用
onGetCourses
属性
class Course extends React.Component {
componentDidMount() {
this.props.onGetCourses();
}
...
}
its because props sometime can be undefined so you have to write a condtion like this 因为道具有时可以不定义所以你必须写这样的条件
allCourses() {
if(this.props.courses){
return this.props.courses.map((course) => {
return(
<li>{ course.name }</li>
);
});
}
else {
return [];
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.