刷新页面反应父状态不会传递到子状态

Question

当我尝试加载我的组件首次，双亲状态是完全传递给孩子。每件事都看起来不错。但是，当我刷新我的页面时，我无法看到传递给子项的状态。我只是看到一些来自孩子的静态内容。以下是我的父母：

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 
}; 

当我刷新页面，我没有看到孩子顺利通过课程状态，只看到一个空白的孩子。在同一行，我看到这个警告在控制台，它当然看起来的原因之一：

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'));