Ответ: 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. почему я получаю эту ошибку: Ошибка типа: 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
        }
        ...
    }

}