TypeError:无法读取react-redux中未定义的属性“map”

时间:2016-07-31 06:09:47

标签: javascript reactjs redux

我是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;
}

我相信为什么数据不存在是因为我没有调用这个动作?任何帮助将不胜感激。

2 个答案:

答案 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