处理从map方法返回null的情况

Question

我正在尝试处理一个从 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””

Answer 1

您需要使用条件（三元）运算符才能正确渲染它

{
  peoplePosts.map((post) => (
    <div key={post.id}>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
      {post.featuredImage ? (
        <p>Yay</p>
      ) : (
        <p>Ouch</p>
      )}
    </div>
  ))
}