Question

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

ResultViewController

从控制台，我可以公平地假设它正确地调用了孩子，但是在课程中传递空值。但是，当我简单地通过MainViewController时，它正确地假设了状态。那我到底哪里出错？

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

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是子组件。

非常感谢。

Answer 1

由于您将一个变量从Parent类传递到子类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>

    );
}

React-redux REST API this.state为null

1 个答案: