TypeError: Невозможно прочитать свойство 'map' из неопределенного React-Redux

Question

Я учусь Redux у https://app.pluralsight.com/library/courses/react-redux-react-router-es6/table-of-contents, но я застрял в какой-то момент. Когда я пытаюсь отобразить свои курсы в CoursePage.js, то отображается эта ошибка. Пропеллер courses помечен как необходимый в CoursesPage, но его значение равно undefined. и:

Uncaught TypeError: Невозможно прочитать свойство 'map' of undefined.

Вот код

CoursePage. js

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

class CoursePage extends Component {
  constructor(props) {
    super(props);
    console.log(this);
    this.state = {
      course: {
        title: "",
      },
    };
  }

  handleChange = (event) => {
    const course = { ...this.state.course, title: event.target.value };
    this.setState({ course });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.createCourse(this.state.course);
    // alert(this.state.course.title);
  };

  render() {
    return (
      <main>
        <div className="container">
          <div className="jumbotron jumbotron-fluid">
            <div className="container">
              <h1 className="display-4">Course Page</h1>
              <form className="mt-4" onSubmit={this.handleSubmit}>
                <input
                  type="text"
                  onChange={this.handleChange}
                  value={this.state.course.title}
                />

                <input type="submit" value="Add" />

                {this.props.course.map((course) => (
                  <div key={course.title}>{course.title}</div>
                ))}

              </form>
            </div>
          </div>
        </div>
      </main>
    );
  }
}

function mapStateToProps(state) {
  return {
    course: state.course,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    createCourse: (course) => dispatch(courseAction.createCourse(course)),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(CoursePage);

CourseReducer. js

import * as types from "../actions/actionTypes";

export default function courseReducer(state = [], action) {
  switch (action.type) {
    case types.CREATE_COURSE:
      return [...state, { ...action.course }];
    default:
      return state;
  }
}

Answer 1

У вас здесь есть несколько незначительных проблем, которые нужно исправить, чтобы привести вас на правильный путь.

Ваш mapStateToProps относится к course, а не courses. И если вы хотите, чтобы оно ссылалось на courses, вам нужно обновить, как действие CREATE_COURSE работает в вашем редукторе.

Чтобы исправить ошибку, вызывающую cra sh, вам нужно добавить initialState, чтобы courses не было неопределенным. Так как это нормально для отображения через пустой массив, но вы не можете отобразить через undefined.

Обновите свой courseReducer до следующего:

import * as types from "../actions/actionTypes";

const initialState = {
  courses: []
}

export default function courseReducer(state = initialState, action) {
  switch (action.type) {
    case types.CREATE_COURSE:
      return { ...state, courses: [...state.courses, action.course] };
    default:
      return state;
  }
}

И затем внесите это изменение на ваш mapStateToProps:

function mapStateToProps(state) {
  return {
    courses: state.courses,
  };
}

Наконец, измените этот бит кода с this.props.course на this.props.courses:

{this.props.courses.map((course) => (
  <div key={course.title}>{course.title}</div>
))}

Теперь ваше приложение должно работать как положено.

Answer 2

Состояние с именем this.state.course является {}, и именно поэтому вы не можете запустить .map() на нем. Он может работать только с массивами. Вместо этого, вероятно, вы хотите показать title для курса, тогда вам не нужно .map().

Попробуйте только следующее:

<div>{this.state.course.title}</div>

Надеюсь, это поможет!