反応ページをリフレッシュすると親状態が子状態になりません

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