反应:TypeError:this.props.courses.map不是一个函数

时间:2019-04-04 05:53:15

标签: javascript arrays reactjs redux

我不明白为什么我不能.map一个数组。

这是代码:

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchCourses } from "../../actions";

class Courses extends Component {
  componentDidMount() {
    this.props.fetchCourses();
  }

  render() {
    console.log("this.props.payload.courses ", this.props.courses);
    const courses = this.props.courses.map(course => {
      return (
        <tr>
          <td>{course.coursename}</td>

          <td>{course.coursetype ? "yes" : "no"}</td>

          <td>{course.courseweeklyhours}</td>

          <td>
            <button>הסר</button>
          </td>
        </tr>
      );
    });

    return (
      <div>
        Courses
        {courses}
      </div>
    );
  }
}

const mapStateToProps = state => {
  // console.log('state ', state);

  return {
    courses: state.courses
  };
};

export default connect(
  mapStateToProps,
  { fetchCourses }
)(Courses);

这是console.log(渲染后的第一行)的结果

enter image description here

我有两个问题

  1. 为什么会出现此错误: TypeError:this.props.courses.map不是函数 enter image description here

  2. 为什么两次加载console.log this.props.payload.courses

1 个答案:

答案 0 :(得分:2)

您需要更正减速器实现。您的控制台输出表明this.props.courses是一个对象,它的一个键为courses,它是一个数组,因此无法映射到this.props.courses

由于减速器似乎在courses中以combinedReducer命名,并且您的初始状态是数组,因此您还应该以数组而不是对象的形式返回更新后的状态

export default (state = [], action) {
    switch(action.type){
        case FETCH_COURSES: {
            return action.payload.data
        }
        ...
    }

}