访问由React Hook在函数中设置的数据

Question

我对React有点陌生。我正在尝试从REST API端点发出GET请求，应该返回以下JSON:

{
"author": "aqho",
"title": "Second post!",
"slug": "second-post",
"body": "Let's see if things get updated in the database like the slug",
"comments_list": [
{
"author": "aqho",
"body": "it works!",
"slug": "7213569934952552711-3"
},
{
"author": "bobglu",
"body": "how are you just so classically handsome",
"slug": "2029512273124111200-4"
}
]
}

要查询API，我使用以下代码:

const PostDetailPage = (props) => {
const [post, setPost] = useState({});
useEffect(() => {
const slug = props.match.params.slug;
const fetchData = async () => {
try {
const res = await API.get(`posts/${slug}`);
setPost(res.data);
}
catch (err) {
console.log(err)
}
};

fetchData();
}, []);
...
}

我想创建一个函数，从JSON返回一个注释列表。我最初的尝试如下:

const renderComments = () => {
return post.comments_list.map(item => (
<li 
key={item.slug}
>
{item.body}
</li>
));
};

然而，它给了我错误TypeError: Cannot read property 'map' of undefined。在网上看，似乎大多数人的问题可以通过将默认值设置为空字典来解决，但我已经在React钩子中这样做了。我很困惑为什么posts.comments_list是未定义的。我还注意到，试图使用console.log(post.title)记录帖子的标题也给了我undefined。我有点困惑为什么会这样，因为下面的代码能够从post中完全提取值:

const PostDetailPage = (props) => {
...
return (
<div id='post-details-page'>
<div id='post-details'>
<h1>{post.title}</h1>
<h4>Published on: {post.published_on}</h4>
<h4>Last edited: {post.last_edited}</h4>
<p> {post.body} </p>
</div>
</div>
);
};
export default PostDetailPage;

Answer 1

const renderComments = () => {
return post.comments_list?.map(item => (
<li 
key={item.slug}
>
{item.body}
</li>
));
};

第一次渲染时，post = {}， post.comments_list未定义

Answer 2

你只需要添加检查post和post.comments_list对象，因为最初它是空的

const renderComments = () => {
return post && post.comments_list &&post.comments_list.map(item => (
<li 
key={item.slug}
>
{item.body}
</li>
));
};