地图功能不会在 nextJS 中呈现

Question

我正在尝试熟悉 NextJS，所以我正在构建一个简单的博客。数据通过 props 传递，并且可以在地图函数内部进行控制台记录，但由于某种原因不会在浏览器中显示任何 HTML。没有错误显示。 VScode 中的 Prettier 也必须关闭，因为它添加了“;”每次我都会保存这个地图函数

 <div>
        {post.map((post) => {
          {console.log(post.description + "here")}
          <h1>post</h1>
          
        })}
 </div>

控制台日志将显示在控制台中，但 h1 会呈现到屏幕上。

有人有什么建议吗？

Answer 1

首先，您需要检查post.map((post) => (...)。他们从内到外都有相同的变量 post。它应该是 posts.map((post) => (...))（循环使用 posts）

map 函数还需要一个 return 值，但您还没有 returned 任何值

 <div>
        {posts.map((post) => {
          return <h1>post</h1>
        })}
 </div>

较短的版本（没有括号）

 <div>
   {posts.map((post) => <h1>post</h1>)}
 </div>

我建议您在 map 结果中也有 key，这将有助于 React 识别 posts 中 re-rendering

的独特元素

 <div>
   {posts.map((post) => <h1 key={post.id}>post</h1>)} //`post.id` is a unique value
 </div>

Answer 2

 <div>
        {post.map((post) => (
          {console.log(post.description + "here")}
          <h1>post</h1>
          
        ))}
 </div>

地图函数没有 returning 任何东西。所以添加了括号或者你可以使用 return() 并粘贴控制台部分

Map function will not render in nextJS