循环内的 HTML 未在 React 中呈现答案

【问题标题】：HTML Within Loop Not Rendering in React循环内的 HTML 未在 React 中呈现
【发布时间】：2021-10-09 03:55:55
【问题描述】：

我正在尝试使用 Gatsby 在 DOM 中列出查询的帖子。下面的小 sn-p 应该足够了，因为 Graphql 查询正在正确获取数据。这个 sn-p 在组件内，它也正确呈现。我是 Gatsby 和 React 的新手，我希望我错过了一些非常基本的东西。

<div className="container">
  Hello! // Renders
  {newsItems.map(newsItem => {
    console.log(newsItem.context.id); // Logs each news item id to console correctly
    Hello! // Does not render
    <p>{newsItem.context.id}</p> // Does not render
  })}
</div>

【问题讨论】：

您的地图函数不会返回任何内容，因此您的组件会为每个新闻项呈现undefined。
是的，就是这样。奇怪的是，我从中复制的示例也没有返回任何内容。我认为这只是一些句法“魔法”。 youtube.com/watch?v=_BueGgzV4kw
箭头函数可以有一个implicit return value，但是如果你使用一个块（如果你包含花括号）返回必须是明确的。我没有查看您所遵循的示例，但我怀疑它使用了括号或裸值，而不是花括号。
再次正确！谢谢你的帮助。我总是对这类问题感到难过，因为它们通常不会帮助人们。我以我习惯的方式编写了一个箭头函数，它甚至从未注册过该示例使用了括号。
这是一个微妙的区别，很容易被忽视。

标签： javascript reactjs graphql

【解决方案1】：

你已经使用了花括号，所以这就是你从 map 函数返回组件的方式。

{newsItems.map(newsItem => {
    console.log(newsItem.context.id); // Logs each news item id to console correctly
    return (
        <>
            Hello!
            <p>{newsItem.context.id}</p>
        </>
   )
})}

没试过，但应该可以。这也仅在 newsItems 包含值时才有效。使用了React Fragments <>...</>，因为 return 必须只返回单个组件。您也可以使用<div>...</div> 代替片段。

试试这个。

【讨论】：

是的，是的，是的。已接受答案。