Question

我正在尝试访问有状态子组件中的父对象，但我似乎无法理解为什么找不到该对象。这个组件是从无状态转换而来的，并且工作正常，所以我很好奇是什么打破了转换后。我是否需要在状态中设置一个空数组，然后使用prop？

设置一个setState函数

以下是错误：

Uncaught ReferenceError: props is not defined

在第this.props.blogs.map((blog, index) => {行

以下是两个组成部分：

//GET /api/app and set to state
class BlogFeedContainer extends React.Component{
    constructor(props, context) {
        super(props, context);
        this.state = this.context.data || window.__INITIAL_STATE__ || {blogs: []};
    }

    fetchList() {
        fetch('http://localhost:3000/api/test')
            .then(res => {
                return res.json();
            })  
            .then(data => {
                console.log(data);
                this.setState({ blogs: data.blog, user: data.user, csrf: data.csrfToken });
            }) 
            .catch(err => {
                console.log(err);
            });
    }

    componentDidMount() {
        this.fetchList();
    }

    render() {
        return (
            <div className="container">
                <h2>Comments List</h2>
                <BlogFeed {...this.state} />
            </div>
        )
    }
};

//Loop through JSON and create Blog and Comment Container Component
class BlogFeed extends React.Component {
    constructor(props){
        super(props);
        this.state = { 
            comments: []
        };
    }

    render(){
        return (
            <div>
            { 
                this.props.blogs.map((blog, index) => {
                    return (
                        <div className="row">
                            <div className="col-md-6 col-md-offset-3 blog-card">
                                <BlogCard {...blog} key={blog.blogIdHash} user={props.user} />
                                <Comments {...blog} key={index} blogId={blog.blogIdHash} csrf={props.csrf}/> 
                            </div>
                        </div>
                    );
                })
            }
            </div>
        );
    }
}

Answer 1

您在错误的行中发现错误。

this和user道具中缺少csrf关键字：

<BlogCard {...blog} key={blog.blogIdHash} user={this.props.user} />
<Comments {...blog} key={index} blogId={blog.blogIdHash} csrf={this.props.csrf} />

在有状态子组件中访问道具错误

1 个答案: