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

Question

我不明白为什么我不能.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（渲染后的第一行）的结果

我有两个问题

1. 为什么会出现此错误： TypeError：this.props.courses.map不是函数

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

Answer 1

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

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

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

}