地图功能不会在 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) => (...))（用postsfor循环）

map函数也需要一个返回值，但你没有返回任何值

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

较短版本（不带括号）

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

我建议你也有key结果map，这将有助于 React 识别你的独特元素以posts进行重新渲染

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