javascript - 与 Redux react : error on propType property

Question

我是 React 世界的新手。我参加了 React 和 Redux 培训类(class)。 就像昨天一样，我在参加在线培训时遇到错误 尽管如此，我浏览了作者类(class)并从屏幕上复制了代码，但我收到了错误:

警告:失败的 propType:未在 CoursesPage 中指定必需的 courses 属性。检查Connect(CoursesPage)的渲染方法。

我已将代码上传到github:https://github.com/tarcisiocorte/reactredux/blob/master/src/components/course/CoursesPage.js

再次......我将不胜感激一些帮助。

import React, {PropTypes} from "react";
import {connect} from 'react-redux';
import * as courseActions from '../../actions/courseActions';

class CoursesPage extends React.Component {

  constructor(props, context){
    super(props, context);

    this.state = {
      course:{title: ""}
    };

    this.onTitleChange = this.onTitleChange.bind(this);
    this.onClickSave = this.onClickSave.bind(this);
  }


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

  courseRow(course, index){
      return <div key={index}>{course.title}</div>;
  }

    onClickSave() {
        this.props.dispatch(courseActions.createCourse(this.state.course));
    }

  render() {
    return (
      <div>
        <h1>Courses</h1>
          {this.props.courses.map(this.courseRow)}
        <h1>Add Courses</h1>
        <input
            type="text"
            onChange={this.onTitleChange}
            value={this.state.course.title} />

          <input
              type="submit"
              value="Save"
              onClick={this.onClickSave} />
      </div>
    );
  }
}

CoursesPage.propTypes = {
    dispatch: PropTypes.func.isRequired,
    courses: PropTypes.array.isRequired
};

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

export  default connect(mapStateToProps)(CoursesPage);

Answer 1

在 https://github.com/tarcisiocorte/reactredux/blob/master/src/index.js#L11

您需要指定类(class)的默认值。

您已指定需要您的 courses 属性:

courses: PropTypes.array.isRequired

因此您需要从 Redux 存储中传递一些内容，并且从外观上看，您的 Redux 存储中的 courses 属性是 未定义。 (设置断点here来检查是否确实如此)

您可以确保您的 redux 存储始终返回您的类(class)的内容，或者您​​可以删除isRequired约束:

CoursesPage.propTypes = {
    dispatch: PropTypes.func.isRequired,
    courses: PropTypes.array
};