Refreshing react Seite übergibt keinen übergeordneten Status an den untergeordneten Status

Question

Wenn ich versuche, meine Komponente zum ersten Mal zu laden, wird der übergeordnete Status perfekt an das Kind übergeben. Alles sieht gut aus. Wenn ich jedoch meine Seite aktualisiere, kann ich nicht sehen, dass der Status an das Kind weitergegeben wird. Ich sehe nur etwas statischen Inhalt von dem Kind. Nach meinen Eltern sind:

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

Auch dies ist mein Kind Komponente:

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

Wenn ich die Seite aktualisieren, ich die Kurse Zustand nicht sehen, in dem Kind weitergegeben, nur ein leeres Kind sehen . Auf der gleichen Linie, sehe ich diese Warnung in der Konsole, die einer der Gründe, sicherlich aussieht:

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 

mir jemand kann sagen, wo ich falsch werde ich den Zustand der untergeordneten Komponente vorbei? Und warum die Warnung?

Answer 1

Hier ist ein funktionierendes Beispiel, was Sie versuchen vereinfachte Versionen Ihrer Komponenten zu erreichen, mit:

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