React中在HTML访问API数据遇TypeError: data.map不是函数问题

错误原因 #

你调用的API返回的是单个用户对象，而非数组，但你在代码中尝试用数组的map方法去遍历它，所以触发了TypeError: data.map is not a function错误。

从接口地址https://cornie-assessment.herokuapp.com/users/8wdkcw05bdEa47R来看，这是获取单个用户详情的接口，返回的数据结构大致是类似这样的对象：

{
  "data": {
    "email": "xxx@xxx.com",
    // 其他用户相关字段
  }
}

你初始将data的状态设为数组[]，当接口返回对象后，setData(data)会把data变为对象，而对象没有map方法，因此报错。

解决方案 #

方案1：直接渲染单个用户数据（匹配当前接口返回） #

修改App.js的渲染逻辑，不需要使用map，直接访问对象属性即可：

import { useEffect, useState } from 'react';
import {getUsers} from './Components/Request'

function App() {
  const[data, setData] = useState(null) // 初始设为null，区分未加载状态

  useEffect(() => {
    getUsers().then(fetchedData => {
      setData(fetchedData)
      console.log(fetchedData)
    })
  }, [])

  // 处理数据未加载完成的情况
  if (!data) {
    return <div>加载中...</div>
  }

  return (
    <div className="App">
      <article>{data.data.email}</article>
    </div>
  );
}

export default App;

方案2：若需获取用户列表（更换接口） #

如果你原本的需求是获取用户列表，需要调用对应的列表接口（假设服务端提供），比如：

export async function getUsers () {
  try {
    // 替换为用户列表接口地址
    const response = await fetch('https://cornie-assessment.herokuapp.com/users')
    return response.json()
  } catch (err) {
    console.log(err);
  }
}

此时若接口返回用户数组，你原本的map逻辑即可正常工作，但需注意数组元素的结构是否匹配items.data.email，可能需要调整为items.email之类的写法，具体取决于接口返回的真实结构。

额外提示 #

• 渲染前务必检查数据状态，比如判断data是否存在，避免未加载时的报错
• 打印console.log(data)确认接口返回的真实结构，再针对性处理逻辑

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