React循环内HTML无法渲染：Gatsby查询帖子DOM渲染问题求助

嘿，兄弟，我一眼就瞅出问题所在啦！你这段代码里的map函数没有返回要渲染的JSX元素，这就是为啥控制台能正常打印ID，但页面上出不来对应内容的核心原因～

React里用map渲染列表的时候，必须让map的回调函数返回你想渲染的UI内容。你现在的代码只是在回调里执行了console.log和写了JSX代码，但没把这些JSX返回给React，浏览器自然不知道要把这些内容渲染到DOM里。

修改后的代码示例 #

方式1：显式添加return #

<div className="container">
  Hello! {/* 可正常渲染 */}
  {newsItems.map(newsItem => {
    console.log(newsItem.context.id); // 可在控制台正确打印每个帖子的ID
    // 一定要加return把JSX返回出去！
    return (
      <div key={newsItem.context.id}>
        Hello! {/* 现在能正常渲染啦 */}
        <p>{newsItem.context.id}</p> {/* 现在能正常渲染啦 */}
      </div>
    );
  })}
</div>

方式2：箭头函数隐式返回 #

如果不想写return，可以把回调函数的大括号换成圆括号，这样箭头函数会自动返回括号里的内容：

<div className="container">
  Hello! {/* 可正常渲染 */}
  {newsItems.map(newsItem => (
    <div key={newsItem.context.id}>
      {console.log(newsItem.context.id)} {/* 控制台正常打印 */}
      Hello! {/* 现在能正常渲染啦 */}
      <p>{newsItem.context.id}</p> {/* 现在能正常渲染啦 */}
    </div>
  ))}
</div>

额外提醒：别忘了加key属性 #

我还给你加上了key属性，这是React渲染列表时的硬性要求——它能帮助React高效识别列表元素的变化，避免不必要的重渲染。这里用newsItem.context.id当key刚好合适，因为每个帖子的ID都是唯一的～

内容的提问来源于stack exchange，提问作者J. Adam Connor