与Redux反应：propType属性出错

Question

我是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);

Answer 1

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

中

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

您已指定需要courses道具：

courses: PropTypes.array.isRequired

因此您需要从redux商店传递一些内容，并且看起来它的redux商店中的courses属性为undefined。 （设置一个断点here来检查实际情况）

您可以确保您的redux商店始终为您的courses返回内容，或者您​​可以删除isRequired约束：

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

Answer 2

在你的路线＆＃39;组件，您想要更改

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

到

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

当您使用组件时，您无法添加所需的道具，因此渲染将是一个不错的选择。这也意味着您必须向routes.js添加redux连接，因为您需要从某个地方获取该信息。

另一个更简单的解决方案是将课程作为道具消除，并在CoursePage加载时直接从redux获取信息。您已经使用mapStateToProps完成了一半的战斗，因此您不需要使用＆＃34; isRequired＆＃34;在您的propTypes中。这基本上是在Klugjo说的时候，所以如果你决定采用这种方法，那就给他信任。

我还猜测，如果＆＃39;课程＆＃39;在您的商店中不存在，您的isRequired也会被触发。因此，只要您拥有商店中该道具的数据，您就可以保留isRequired。

Answer 3

对于遇到类似失败的道具类型错误的任何人（例如，如下所示），或者如果其他答案不能解决您的问题，则以下可能是您的替代解决方案。在上面user428745的帖子中，下面错误中的someProjects和ResponsiblePage对应于courses道具（某些值数组）和{{1 }}组件。

在下面给出CoursesPage的设置

user428745

该问题可能与redux状态如何首先获得CoursesPage.propTypes = { dispatch: PropTypes.func.isRequired, courses: PropTypes.array.isRequired }; function mapStateToProps(state, ownProps) { return { courses: state.courses }; } 值有关。在我的情况下，在从Redux存储中获得数据之前，已经设置了state.courses中的prop（即courses中的state.courses）。这是由于尚未完成API数据调用而发生的。我的解决方法是：

mapStateToProps

如果function mapStateToProps(state, ownProps) { return { courses: state.courses || [] // Equivalent to statement below //courses: state.courses == null ? [] : state.courses }; } 为空（由于尚未加载API数据），我们返回state.courses以满足我们道具上的[]要求。如果有效，则意味着数据可用并且已放入array内，那么我们只需返回state.courses即可。

还请注意，可能会有不同的必需配置设置（以使redux正常工作），即。取决于您如何将减速器链接到根减速器（这是state.courses文件夹内index.js中的内容）。如果这些更改仍不能解决错误，请尝试使用root reducer进行另一种处理，例如：

reducers

以及您打算在何处使用此值，即。在// From this (see `user428745`'s source files, where 'courseReducer' was imported as 'courses') export default combineReducers({ courseReducer }); // To this export default combineReducers({ rootReducer: courseReducer }); // Where 'mapStateToProps' would also have to change function mapStateToProps(state, ownProps) { return { courses: state.rootReducer.courses || [] }; } 设置中使用this.props.courses或props.courses，仅当数组不为空时，才可以控制台记录值（或要执行的操作）：

CoursesPage

或者也许听if (props.courses.length > 0) { console.log(props.courses); } 的更改，以便您仅在更改后的“瞬间”执行某事（而上述props.courses语句将始终有效，从道具填充值开始）：

if

请注意，如果您使用useEffect(() => { if (props.courses.length > 0) { console.log(props.courses); } }, [props.courses]); ，请确保它在useEffect组件中，而不是在文件的“根目录”中。写CoursesPage。