时间戳

首页 > 解决方案 > 与 Redux 反应：propType 属性错误

javascript - 与 Redux 反应：propType 属性错误

问题描述

我是 React 世界的新手。我有一个培训 React 和 Redux 的课程。就像昨天一样，我在参加在线培训时遇到了错误尽管，我浏览了作者课程并从屏幕上复制了代码，但我收到了错误：

警告：失败的 propType：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);

标签： javascriptreactjsredux

解决方案

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

您需要为课程指定默认值。

您已指定您的courses道具是必需的：

courses: PropTypes.array.isRequired

所以你需要从 redux 存储中传入一些东西，从外观courses上看，你的 redux 存储中的属性是undefined. （在此处设置断点以检查实际情况）

你可以确保你的 redux 商店总是为你返回一些东西，courses或者你可以删除isRequired约束：

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

推荐阅读