Next.js+Axios从Mongo取数据：仅控制台可见，无法渲染至页面

一、console.log多次输出的原因及修复 #

原因 #

1. React组件每次状态更新（比如调用setLoading、setTeams）都会触发重新渲染，你的console.log(teams)写在组件顶层，每次渲染都会执行。
2. Next.js开发环境默认启用StrictMode，会额外触发两次渲染（用于检测组件副作用的开发校验机制，生产环境不会出现），所以会出现多次空数组和数据数组的输出。

修复 #

把console.log放到监听teams变化的useEffect中，只有当teams状态更新时才打印：

useEffect(() => {
  console.log('teams数据更新:', teams)
}, [teams])

二、数据无法渲染到页面的可能原因及修复 #

1. 先规范getData函数的写法（避免潜在逻辑问题） #

你的代码同时混用了await和.then，虽然能拿到数据，但写法不规范，可能导致逻辑混乱，统一改成await写法：

async function getData () {
  try {
    setLoading(true)
    // 直接用await接收响应
    const res = await axios('/api/getTeam/data')
    setTeams(res.data)
    setLoading(false)
  } catch (error) {
    console.log('请求错误:', error)
    setLoading(false)
  }
}

2. 检查渲染逻辑是否正确 #

以下是正确的渲染示例（需根据你的实际数据字段调整）：

return (
  <div className="team-list">
    {/* 处理加载状态 */}
    {loading && <p>数据加载中...</p>}
    {/* 当teams有数据时遍历渲染 */}
    {!loading && teams.length > 0 && (
      <ul>
        {teams.map(team => (
          // 必须添加唯一key，MongoDB的_id刚好可以用
          <li key={team._id}>
            <h3>{team.name}</h3>
            <p>{team.description}</p>
            {/* 替换成你的实际数据字段 */}
          </li>
        ))}
      </ul>
    )}
    {/* 处理空数据情况 */}
    {!loading && teams.length === 0 && <p>暂无团队数据</p>}
  </div>
)

常见渲染错误点 #

• 忘记给列表项添加唯一key：React要求列表子元素必须有唯一key，否则会警告且渲染异常。
• 未处理初始空数组状态：初始时teams是空数组，直接遍历会没有内容，需要判断数组长度。
• 字段名拼写错误：比如把team.name写成team.Name，导致渲染空内容。

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