javascript - 刷新react页面不会将父状态传递给子状态

Question

当我第一次尝试加载组件时，父状态会完美地传递给子组件。每件事看起来都很好。但是，当我刷新页面时，我只是看不到传递给子级的状态。我只是看到 child 的一些静态内容。以下是我的 parent :

render(){

    const {courses} = this.props;
    // debugger;
    let fn = (child) => {
        return React.cloneElement(child, {
            courses: courses
        });
    };

    let childrenWithProps = React.Children.map(this.props.children, fn);

    return (
        <div>
            <div className="container jumbotron jumbotron-fluid">
                <h1>CoursesPage</h1>
                <p>This page adds and lists all the courses</p>
                <Link to="/courses/courseslist">
                    <Button color="primary">Course Listing</Button>
                </Link>
            </div>
            {childrenWithProps}
        </div>

    );
}
}

CoursesPage.propTypes = {
    courses: PropTypes.array.isRequired,
    actions: PropTypes.object.isRequired,
    children: PropTypes.object.isRequired
};

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

//mapping all course actions to actions in the props
function mapDispatchToProps(dispatch){
    return {
        actions: bindActionCreators(courseActions, dispatch)
    };
}


export default connect(mapStateToProps, mapDispatchToProps)(CoursesPage);

此外，这是我的子组件:

class CourseDetailsAndList extends React.Component {
constructor(props, context){
        super(props, context);
        this.state = {
            courses: this.props.courses
        };
    }
render(){
    const {courses} = this.props;
    return (
        <div>
            <h1>Courses</h1>
            <CourseList courses={this.state.courses}/>
        </div>
    );
  }
}

CourseDetailsAndList.propTypes = {
    courses: PropTypes.array.isRequired
};

当我刷新页面时，我没有看到子级中传递的类(class)状态，只看到一个空白的子级。同样，我在控制台中看到此警告，这看起来肯定是原因之一:

Warning: Failed prop type: The prop `courses` is marked as required in `CourseDetailsAndList`, but its value is `undefined`.
in CourseDetailsAndList (created by RouterContext)
in RouterContext (created by Router)
in Router
in Provider

有人可以告诉我将状态传递给子组件时哪里出错了吗？为什么会出现警告？

Answer 1

以下是您尝试使用组件的简化版本来完成的工作示例:

https://jsfiddle.net/79qk1r50/2/

class ParentComponent extends React.Component {
  render() {
    const {parentProp} = this.props;
    const childrenWithProps = React.Children.map(this.props.children, function(child) {
        return React.cloneElement(child, {parentProp: parentProp});
    });

    return (
      <div>
        <h1>ParentComponent</h1>
        My parentProp is: {parentProp}
        {childrenWithProps}
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render(){
    const {parentProp} = this.props;
    return (
      <div>
        <h2>Child Component</h2>
        Received from parent: {parentProp}
      </div>
    );
  }
}

React.render(
  <ParentComponent parentProp={'foo'}>
    <ChildComponent />
    <ChildComponent />    
  </ParentComponent>,
  document.getElementById('container'));