React中Axios请求数据后用map渲染出现TypeError报错求助

核心原因 #

你遇到的TypeError: undefined is not a function本质是当前的data不是数组，而是Axios的响应对象或者其他非数组类型，所以无法调用数组的map方法。

尽管API返回的是数组，但Axios会把接口返回的数据包裹在响应对象的data属性中。如果你的请求处理代码错误地把整个响应对象赋值给了状态变量，就会导致data是一个包含data、status、headers等属性的对象，而非目标数组。

修复步骤 #

1. 修正Axios请求的状态赋值逻辑
   确保你从Axios响应中提取出真正的接口返回数组：

   axios.get('/your-api-url')
     .then(response => {
       // 必须取response.data，这才是API返回的数组
       setData(response.data);
     })
     .catch(err => console.error(err));
   

   如果你之前写的是setData(response)，就会把整个响应对象赋值给data，导致后续调用map失败。

2. 优化状态初始值
   把data的初始状态设为空数组，避免初始渲染时的潜在问题：

   const [data, setData] = useState([]);
   

   这样即使请求还未完成，data.map()也能正常执行（空数组的map不会报错），你甚至可以调整渲染逻辑：

   {data.length > 0 ? (
     data.map((item) => (
       <div className="data" key={item.id}>
         <h3>{item.adults}</h3>
       </div>
     ))
   ) : (
     <h3>No data yet</h3>
   )}
   

3. 避免变量名混淆（可选但推荐）
   你当前map的参数名和外层状态变量data重名了，虽然不影响功能，但容易造成代码混乱，建议改成更清晰的名字，比如item或cart：

   data.map((item) => {
     return (
       <div className="data" key={item.id}>
         <h3>{item.adults}</h3>
       </div>
     );
   })
   

验证方法 #

可以在状态赋值后打印data的类型，确认它是数组：

setData(response.data);
console.log(Array.isArray(data)); // 应该返回true

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