反应："类型错误：props.category is undefined"时访问类别的键

Question

我从后端接收JSON对象，该对象包含一个名称category，该值是一个对象。此对象包含名称_id和name。但当我使用props.category._id访问_id时，会出现以下错误：

TypeError: props.category is undefined

实际上，JSON对象是MongoDB的文档，category是包含对另一个文档的引用的字段。

后端是用Node.js编写的，我使用的是Mongoose。

我可以共享所需部分的后端代码以及前端代码。

App.js

<Route path="/blog/:id" exact><SinglePost /></Route>

singlepost.js:页面的React组件(singlepost(

import React, { Component } from 'react';
import { withRouter } from 'react-router';
import axios from 'axios';
import Comments from '../parts/comments';
import RelatedPosts from '../parts/relatedpost';
import BlogContent from '../parts/blogcontent';
class SinglePost extends Component 
{
constructor(props)
{
super(props);
this.state = {
blog: [],
commentCount: []
};
}
componentDidMount()
{
axios.get('http://localhost:5000/blogs/get/' + this.props.match.params.id)
.then(res => {
this.setState({
blog: res.data
});
})
.catch(err => console.log(err));
axios.get('http://localhost:5000/comments/count/' + this.props.match.params.id)
.then(res => {
this.setState({
commentCount: res.data
});
})
.catch(err => console.log(err));
}
render()
{
return (
<div>

<section className="blog-section">
<div className="container">
<div className="single-post no-sidebar">
<div className="title-single-post">
<a className="text-link" href="#"></a>
<h1>{this.state.blog.title}</h1>
<ul className="post-tags">
<li>{new Date(this.state.blog.createdAt).toDateString()}</li>
<li><a href="#">{this.state.commentCount.count} comments</a></li>
</ul>
</div>
<div className="single-post-content">
<img src={"../../" + this.state.blog.imageUrl} alt="" />
<div className="post-content">
<div className="post-social">
<span>Share</span>
<ul className="share-post">
<li><a href="#" className="facebook"><i className="fa fa-facebook"></i></a></li>
<li><a href="#" className="twitter"><i className="fa fa-twitter"></i></a></li>
<li><a href="#" className="pinterest"><i className="fa fa-pinterest"></i></a></li>
</ul>
</div>
<BlogContent blog = {this.state.blog} />
</div>
<RelatedPosts category = {this.state.blog.category} />

</div>
<Comments />
</div>
</div>
</section>
</div>
);
}
}
export default withRouter(SinglePost);

relatedposts.js:相关帖子的React组件(relatedposts(

import React from 'react';
import axios from 'axios';
let RelatedPost = props => (
<div className="col-lg-4 col-md-4">
<div className="news-post standard-post text-left">
<div className="image-holder">
<a href="single-post.html"><img src={"../../" + props.currentPost.imageUrl}  alt="" /></a>
</div>
<a className="text-link" href="#">{props.currentPost.category.name}</a>
<h2><a href="single-post.html">{props.currentPost.title}</a></h2>
<ul className="post-tags">
<li>{new Date(this.state.blog.createdAt).toDateString()}</li>
</ul>
</div>
</div>
);
const RelatedPosts = (props) => {
var relatedPosts = [];
axios.get('http://localhost:5000/get/related-posts/' + props.category._id)
.then(res => {
relatedPosts = res.data;
})
.catch(err => console.log(err));
return (
<div className="related-box">
<h2>Related Posts</h2>
<div className="row">
{relatedPosts.map((currentPost, index) => {
return <RelatedPost currentPost = {currentPost} key = {index} />
})}
</div>
</div>
);
}
export default RelatedPosts;

来自后端的JSON

{"featured":false,"likes":5,"_id":"5f084b96acb1d60bcee3f0fa","title":"Lorem Ipsum","description":"Lorem Ipsum Blog","imageUrl":"upload/blog/f1.jpg","category":{"_id":"5f05ae4b27ef066f94673265","name":"Technology"},"createdAt":"2020-07-10T11:05:58.044Z","updatedAt":"2020-07-10T11:05:58.044Z","__v":0}

Answer 1

像这样更改SinglePost组件，检查数据是否已到达并设置在您的状态中。有一种方法可以做到如下

SinglePost.js

import React, { Component } from 'react';
import { withRouter } from 'react-router';
import axios from 'axios';
import Comments from '../parts/comments';
import RelatedPosts from '../parts/relatedpost';
import BlogContent from '../parts/blogcontent';
class SinglePost extends Component {
constructor(props)
{
super(props);
this.state = {
blog: [],
commentCount: []
};
}
componentDidMount()
{
axios.get('http://localhost:5000/blogs/get/' + this.props.match.params.id)
.then(res => {
this.setState({
blog: res.data
});
})
.catch(err => console.log(err));
axios.get('http://localhost:5000/comments/count/' + this.props.match.params.id)
.then(res => {
this.setState({
commentCount: res.data
});
})
.catch(err => console.log(err));
}
render()
{
return (
<div>
<section className="blog-section">
<div className="container">
{this.state.blog.length > 0 ? // <----- here
<div className="single-post no-sidebar">
<div className="title-single-post">
<a className="text-link" href="#"></a>
<h1>{this.state.blog.title}</h1>
<ul className="post-tags">
<li>{new Date(this.state.blog.createdAt).toDateString()}</li>
<li><a href="#">{this.state.commentCount.count} comments</a></li>
</ul>
</div>
<div className="single-post-content">
<img src={"../../" + this.state.blog.imageUrl} alt="" />
<div className="post-content">
<div className="post-social">
<span>Share</span>
<ul className="share-post">
<li><a href="#" className="facebook"><i className="fa fa-facebook"></i></a></li>
<li><a href="#" className="twitter"><i className="fa fa-twitter"></i></a></li>
<li><a href="#" className="pinterest"><i className="fa fa-pinterest"></i></a></li>
</ul>
</div>
<BlogContent blog = {this.state.blog} />
</div>
<RelatedPosts category = {this.state.blog.category} />

</div>
<Comments />
</div>
: <h1>Loading</h1> // <----- here
</div>
</section>
</div>
);
}
}
export default withRouter(SinglePost);