React 必须返回一个有效的 React 元素（或 null）。您可能返回了未定义的，答案

【问题标题】：React A valid React element (or null) must be returned. You may have returned undefined,React 必须返回一个有效的 React 元素（或 null）。您可能返回了未定义的，
【发布时间】：2017-07-20 02:34:21
【问题描述】：

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

class CoursePage extends React.Component {

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

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

/*
 To enhance performance declare all the bindings here,
 otherwise if they are declare in the mark up binding
 will have to take place during rendering which will take
 performance hit.
*/

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
  });
}
 onClickSave() {
this.props.dispatch(courseActions.createCourse(this.state.course));
}

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

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

CoursePage.prototype = {
dispatch: PropTypes.func.isRequired,
courses: PropTypes.array.isRequired
};

const mapStateToProps = (state, ownProps) => {
return {
  courses: state.courses
};
};

// since second parameter is not provided, connect ejects connect prop
export default connect(mapStateToProps)(CoursePage);

收到以下错误，我不确定为什么 CoursePage 会被视为非反应组件

invariant.js:44 Uncaught Error: CoursePage(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
    at invariant (invariant.js:44)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:166)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
    at Object.mountComponent (ReactReconciler.js:39)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:297)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:222)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
    at Object.mountComponent (ReactReconciler.js:39)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:203)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:628)

【问题讨论】：

您的组件在我看来是正确的。也许这与您正在更改 CoursePage 的原型有关？如果你想使用 PropTypes，你应该使用 CoursePage.propTypes = { ... } 而不是原型。此外，在 react 版本 >= 15.5 中不推荐使用 propTypes。所以你必须将它作为一个单独的依赖安装。
这就是问题所在，非常好，我想将此提升为答案。
我在下面添加了我的答案。

标签： reactjs react-redux

【解决方案1】：

这与您正在更改CoursePage 的原型有关。如果你想使用 PropTypes，你应该使用CoursePage.propTypes = { ... } 而不是prototype。此外，propTypes 在 react 版本 >= 15.5 中已弃用。所以你必须把它作为一个单独的依赖安装。

【讨论】：