Javascript React-redux REST API此状态为空

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

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>

    );
}

…其中courseList是子组件

---

非常感谢您的帮助。

因为您要将一个变量从父类传递给子类CourseList，所以您需要使用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>

    );
}

---

@X Plot1当然有效，但我没有从文档中清楚地了解何时提交this.state vs this.props。另外，如果我打算克隆状态或将状态“传递”给我的子组件，那么this.props是如何在这里发挥作用的？也许这是一种更好的方法，可以简单地区分props和state，道具是子组件接受的对象，并且组件内的状态是可变的，可以触发重新渲染。我刚刚编辑了您的代码并粘贴在我的答案中，这可能是您想要的，而不是复制对象@乌姆卡尔

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

    );
}