我正在尝试处理一个从 JSON 查询获取所有字段的映射方法。我得到的一些字段是空的,这很好,但是在调用它们时,我收到一条错误消息“无法读取 null 的属性”。
所以我的想法是在地图中放置一个 if 语句来检查该项目是否为空,在这种情况下根本不返回它。但我似乎无法让它发挥作用,而且我不确定我做错了什么。
这就是代码看起来不起作用的样子:
{
peoplePosts.map((post) => (
<h2>{post.title}</h2>
<p>{post.content}</p>
<p>{post.featuredImage.node.sourceUrl}</p>
))
}
由此产生的错误消息是:“无法读取 null 的属性(读取‘节点’)”
这是我的解决方案,但也不起作用😅
{
peoplePosts.map((post) => (
<h2>{post.title}</h2>
<p>{post.content}</p>
if (post.featuredImage.node.sourceUrl == null) {
<p>Ouch</p>
} else {
<p>Yay</p>
}
))
}
由此产生的错误消息是:“预期为”)”,但发现为“if””
您需要使用条件(三元)运算符才能正确渲染它
{
peoplePosts.map((post) => (
<div key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
{post.featuredImage ? (
<p>Yay</p>
) : (
<p>Ouch</p>
)}
</div>
))
}