映射函数不会在nextJS中呈现
提问于 2022-04-03 17:31:21
我正试图熟悉NextJS，所以我正在构建一个简单的博客。数据是通过道具传递的，可以在map函数中记录控制台，但是由于某种原因，浏览器中不会显示任何HTML。不显示错误。在VScode中更漂亮的也必须关闭bc，它是添加";“每次我保存这个映射函数
<div>
{post.map((post) => {
{console.log(post.description + "here")}
<h1>post</h1>
})}
</div>控制台日志将显示在控制台中，但h1确实呈现到屏幕上。
有人有什么建议吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-04-03 17:34:52
首先，您需要检查post.map((post) => (...)。它们从内部到外部都有相同的变量post。它应该是posts.map((post) => (...)) (循环使用posts )
map函数还需要一个返回值，但没有返回任何值。
<div>
{posts.map((post) => {
return <h1>post</h1>
})}
</div>较短的版本(没有括号)
<div>
{posts.map((post) => <h1>post</h1>)}
</div>我建议您在key中使用map结果，这样可以帮助您识别posts中的唯一元素，以便重新呈现。
<div>
{posts.map((post) => <h1 key={post.id}>post</h1>)} //`post.id` is a unique value
</div>Stack Overflow用户
发布于 2022-04-03 17:37:51
<div>
{post.map((post) => (
{console.log(post.description + "here")}
<h1>post</h1>
))}
</div>
映射函数没有返回任何内容。因此添加了括号，或者可以使用return()粘贴控制台部分
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71731154
复制相关文章
点击加载更多
腾讯云开发者
