React-Redux-REST-API this.state ist null

Question

Ich bin neu in Redux und verwende derzeit eine API zum Abrufen von Daten. Ich versuche, den Status von meinem Elternteil an this.props.children mit React.cloneElement zu übergeben. Ich denke, dass ich einen Fehler mache, wenn ich React.cloneElement benutze, da der Debugger den Zustand zeigt, Null zu sein, wenn ich es an die cloneElement Funktion übergebe. Es folgt meine Eltern Methode machen:

render(){ 

    const {courses} = this.state; 
    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> 

    ); 
} 

von der Konsole, kann ich ziemlich annehmen, dass es die Kinder richtig ruft, aber in den Kursen Nullwert übergeben. Wenn ich jedoch einfach <CourseList courses={courses} /> übergebe, nimmt es den Zustand korrekt an. Also, wo gehe ich genau falsch?

Ich erhalte den folgenden Fehler in der Konsole:

Uncaught TypeError: Cannot read property 'map' of undefined 
at CourseList (courseList.js:20) 
at ReactCompositeComponent.js:305 
at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:304) 
at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279) 
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187) 
at Object.mountComponent (ReactReconciler.js:45) 
at ReactDOMComponent.mountChildren (ReactMultiChild.js:236) 
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703) 
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:522) 

..wo courseList ist die untergeordnete Komponente.

Viel Hilfe geschätzt.

Answer 1

Da Sie in einer Variablen aus der übergeordneten Klasse auf das Kind Klasse vorbei sind CourseList Sie props statt

const {courses} = this.props; 

Link zur Dokumentation Components and Props

Dies könnte verwenden müssen, was Sie stattdessen wollen .