TypeError：无法读取未定义的 React-Redux 的属性“地图”

Question

我正在向https://app.pluralsight.com/library/courses/react-redux-react-router-es6/table-of-contents 学习Redux，但我在某些时候卡住了。当我试图在CoursePage.js 中映射我的课程时，它显示this 错误，courses 的道具在CoursesPage 中被标记为必需，但它的值为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

名为this.state.course 的状态是{}，这就是您不能在其上运行.map() 的原因。它只能处理数组。相反，您可能想在课程中显示title，然后您不需要.map()。

仅尝试以下方法：

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

我希望这会有所帮助！

Answer 2

您在这里遇到了一些小问题，需要解决这些问题才能让您走上正轨。

您的mapStateToProps 指的是course，而不是courses。如果您希望它引用courses，那么您需要更新CREATE_COURSE 操作在您的reducer 中的工作方式。

要修复导致崩溃的错误，您需要添加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>
))}

现在您的应用应该可以按预期工作了。