Next.js中Map方法遍历数据不渲染页面问题排查

你的代码存在明确的编写错误，页面无法渲染、热更新报错都是这些问题导致的：

• 核心错误：Array.map 的回调函数使用大括号{}包裹了JSX节点，但没有手动写return返回该节点。箭头函数使用大括号包裹函数体时，不会自动返回执行结果，当前写法每个遍历项实际返回undefined，因此页面没有任何对应内容渲染，console.log能打印是因为打印逻辑在函数体内部正常执行，和返回值无关。
• 遗漏规范要求：React列表渲染时，每个遍历生成的最外层节点必须添加唯一的key属性，缺失该属性也会触发编译警告，甚至导致热更新失效。
  你看到的Fast Refresh全量重载报错，就是上述代码问题导致热更新无法增量更新触发的，修复代码后该报错会自动消失。

修复后完整代码 #

import React from 'react'

export default function secretStashScreen() {
  const numbers = [1, 2, 3, 4, 5];
  return (
    <div>
      {numbers.map((number) => {
        // 大括号包裹函数体时，必须手动return要渲染的节点
        return <div key={number}>{number}</div>
      })}
    </div>
  )
}

简写写法参考 #

如果遍历回调里不需要写额外的处理逻辑，可以去掉大括号，用小括号包裹JSX，箭头函数会隐式返回节点，写法更简洁：

import React from 'react'

export default function secretStashScreen() {
  const numbers = [1, 2, 3, 4, 5];
  return (
    <div>
      {numbers.map((number) => (
        <div key={number}>{number}</div>
      ))}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者tengxuanp