Реагируйте с Redux: ошибка в свойстве propType

Question

Я новичок в мире React. Я прошел курс обучения React и Redux. Как вчера я получил ошибку, когда я посещаю онлайн-тренинг Несмотря на то, что, пройдя курс автора и скопировав код с экрана, я получаю сообщение об ошибке:

Предупреждение: сбойный propType: Обязательный prop courses не был указан в CoursesPage. Проверьте метод визуализации 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

В вашем компоненте «Маршруты» вы захотите изменить

<Route path="courses" component={CoursesPage} />

до

<Route path='courses' render={(stuff) => (
  <CoursePage courses={stuff} />
)}/>

Когда вы используете компонент, вы не можете добавить необходимые реквизиты, поэтому рендер будет хорошей альтернативой. Это также означает, что вам нужно будет добавить редукс-соединения в ваши маршруты. Js, поскольку вам нужно откуда-то получать эту информацию.

Другое, более простое, решение состоит в том, чтобы просто исключить курсы в качестве опоры и получать эту информацию напрямую из RedEx при загрузке CoursePage. Вы уже выполнили половину битвы с вашим mapStateToProps, поэтому вам не нужно иметь его с «isRequired» в ваших propTypes. Это в основном, когда Клуджо сказал, поэтому, если вы решите воспользоваться этим подходом, отдайте ему должное.

Я бы также рискнул предположить, что если «курсов» в вашем магазине не существует, ваш isRequired также запускается. Таким образом, вы можете хранить isRequired до тех пор, пока у вас есть данные для этого реквизита в магазине.

Answer 2

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

Для курсов необходимо указать значение по умолчанию.

Вы указали, что требуется courses реквизит:

courses: PropTypes.array.isRequired

так что вам нужно передать что-то из хранилища редуксов, и, судя по всему, свойство courses в вашем хранилище редуксов равно undefined. (Поставьте точку останова здесь , чтобы убедиться, что это действительно так)

Вы можете убедиться, что ваш магазин приставок всегда возвращает что-то для вашего courses, или вы можете удалить ограничение isRequired:

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