我是React和Redux的新手,但仍然有点混淆。
我的目标是使用GET请求在HTML中呈现一堆json数据。我正在使用react和redux来管理对象的状态,但我相信我的问题是数据不存在
所以基本上每当有人请求URL /课程时,他/她都会在json中看到大量数据。
我在组件
中收到错误TypeError:无法读取未定义
的属性“map”
这是代码
动作
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
});
})
}
});
}
}
减速
export default function course(state={}, action) {
switch (action.type) {
case 'GET_COURSES':
return Object.assign({}, state, {
courses: action.courses
})
default:
return state;
}
}
组件
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);
索引缩减器,我将所有内容组合在一起
import { combineReducers } from 'redux';
import course from './course';
export default combineReducers({
course,
});
配置商店,我存储初始状态和减速器
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;
}
我相信为什么数据不存在是因为我没有调用这个动作?任何帮助将不胜感激。
答案 0 :(得分:5)
mapStateToProps
将根状态作为参数(您的索引缩减器,也是根缩减器),而不是您的course
缩减器。据我所知,这是你商店的结构:
-index <- This is the root reducer
-course
所以要在你的组件中获得该州的课程:
// state is the state of the root reducer
const mapStateToProps = (state) => {
return {
courses: state.course.courses
}
}
此外,您可以考虑使用一系列空课程初始化course
reducer的状态,因此如果您必须在触发操作之前渲染组件,则不会收到错误。
const initialState = {
courses: []
};
export default function course(state= initialState, action) {
...
}
最后,你根本没有触发动作,所以你永远不会真正获得这些课程,我假设你希望在加载Course
组件后检索它们,因为你可以使用{ <1}}组件中的事件。
首先,您需要将操作映射到组件的属性
componentDidMount
现在,当组件安装时,调用// 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);
属性
onGetCourses
答案 1 :(得分:1)
因为道具某些时候可能是未定义的,所以你必须写一个这样的条件
Resolution(03:03): the software is installed
Resolution(10:12): software removed
Resolution(05:01): Software configuration