Next.js中无法映射JSON对象数据？求排查原因

你的代码存在两个关键问题，导致页面无法输出内容：

1. map 回调未返回JSX元素 #

你用大括号 {} 包裹了map的回调函数体，但没有显式返回<p>元素。箭头函数规则里，大括号代表函数体，必须用return指定返回内容；如果想省略return，需要改用小括号()直接包裹JSX。

修正后的渲染代码：

{backendData && backendData.map((userData) => (
  <p key={userData._id}>{userData._id}</p>
))}

或者显式添加return：

{backendData && backendData.map((userData) => {
  return <p key={userData._id}>{userData._id}</p>
})}

2. 异步状态更新的日志时机问题（非渲染失败原因，但需注意） #

你在useEffect里调用fetchUserData()后立刻console.log(backendData)，但setBackendData是异步操作，此时打印的backendData还是初始值null。如果要查看更新后的状态，可以单独加一个监听状态变化的useEffect：

useEffect(() => {
  console.log(backendData, 'updated data')
}, [backendData])

另外补充一个语法小问题：你的if (response.ok)后面误用了圆括号()，应该改成大括号{}，虽然不影响功能，但不符合规范：

if (response.ok) {
  setBackendData(json)
}

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