React-redux REST API this.state 为 null

Question

我是 Redux 的新手，目前正在使用 API 来获取数据。我正在尝试使用 React.cloneElement 将状态从我的父母传递给 this.props.children。我想我在使用 React.cloneElement 时犯了一个错误，因为当我将它传递给 cloneElement 函数时，调试器显示状态为空。以下是我的父渲染方法：

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>

    );
}

从控制台，我可以公平地假设它正确地调用了孩子，但在课程中传递了 null 值。但是，当我简单地通过 <CourseList courses={courses} /> 时，它会正确地假定该状态。那么我到底哪里错了？

我在控制台中收到以下错误：

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)

..其中 courseList 是子组件。

非常感谢您的帮助。

Answer 1

由于您要将变量从父类传递给子类CourseList，因此您需要改用props

const {courses} = this.props;

文档链接Components and Props

这可能是你想要的。

render(){
    const {coursesList} = this.props;

    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>
            {coursesList}
        </div>

    );
}