React：TypeError：this.props.courses.map不是函数

Posted 2023-01-05

我无法理解为什么我不能.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被加载两次？

答案

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

由于你的reducer似乎在courses中以combinedReducer命名，并且你的初始状态是一个数组，你应该将更新后的状态也作为数组而不是对象返回

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