reactjs - 在函数中访问由 React Hook 设置的数据
问题描述
我对 React 有点陌生。我正在尝试从应该返回以下 JSON 的 REST API 端点发出 GET 请求:
{
"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 hook 中已经做到了。我对为什么 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;
解决方案
const renderComments = () => {
return post.comments_list?.map(item => (
<li
key={item.slug}
>
{item.body}
</li>
));
};
在第一次渲染时,post = {},post.comments_list 未定义。
推荐阅读
- javascript - 从父级关闭子窗口并检索数据
- .net-core - JWT Expiration Time 访问令牌设置为一小时 .net 核心
- c++ - 为什么我不能在基于范围的循环之外使用 boost::adaptor::map_values?
- java - 需要从 Mon 中提取数据
- reactjs - 字体加载在本地服务器上但未在生产中
- contentful - 如何在 Contentful 中为下拉字段设置不同的标签和值
- java - java AES 加密方法的这条返回线是什么?
- javascript - 电子保存的 mp3 不播放
- php - 默认的 PHP 语言环境从何而来?
- c# - 继承一个自定义接口,该接口本身继承 IEnumerable
>