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

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

错误如下：

Uncaught ReferenceError: props is not defined

//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>
        );
    }
}

在第

行this.props.blogs.map（（blog，index）=>{

以下是两个组件：

Uncaught ReferenceError: props is not defined

//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>
        );
    }
}

//GET/api/app并设置为state
类BlogFeedContainer扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
this.state=this.context.data | | | window.uu INITIAL_ustate uu| |{blogs:[]}；
}
fetchList（）{
取（'http://localhost:3000/api/test')
。然后（res=>{
返回res.json（）；
})  
。然后（数据=>{
控制台日志（数据）；
this.setState（{blogs:data.blog，user:data.user，csrf:data.csrfToken}）；
}) 
.catch（错误=>{
控制台日志（err）；
});
}
componentDidMount（）{
这是fetchList（）；
}
render（）{
返回(
评论列表
)
}
};
//循环使用JSON并创建博客和评论容器组件
类BlogFeed扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
评论：[]
};
}
render（）{
返回(
{ 
this.props.blogs.map（（blog，index）=>{
返回(
);
})
}
);
}
}

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

user

和

csrf

道具中缺少

this

关键字：

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

呈现

BlogFeed

之前状态是什么样子？如果

console.log（this.state）

，输出是什么？如果在返回JSX之前在

BlogFeed

组件的呈现中设置console.log，我会看到一个带有空注释数组的对象