React中调用.map()提示不是函数，已声明数组状态仍报错求助

问题原因 #

你初始化vendorsList为数组，但调用API后setVendorsList(res.data)把状态改成了非数组类型（比如对象、null或其他），导致后续调用map时触发错误。大概率是API返回的res.data结构和你预期的不一样——比如返回的是包含数组的对象（如{ data: [...] }），而非直接返回数组。

解决方案 #

1. 先确认API返回的数据结构 #

在then回调里打印返回值，明确实际结构：

axios.get('http://127.0.0.1:8000/api/vendors/').then((res)=>{
    console.log(res.data); // 查看控制台输出，确认数据结构
    setVendorsList(res.data)
})

比如如果控制台显示{ vendors: [ {...}, {...} ] }，那你需要取res.data.vendors来设置状态。

2. 强制确保状态为数组 #

设置状态时做判断，避免非数组值覆盖：

const getVendors =()=>{
  axios.get('http://127.0.0.1:8000/api/vendors/').then((res)=>{
      // 若res.data是数组则直接用，否则设为空数组
      setVendorsList(Array.isArray(res.data) ? res.data : []);
  })
}

如果API返回的是嵌套数组（比如res.data.data是数组），则调整为：

setVendorsList(Array.isArray(res.data.data) ? res.data.data : []);

3. 渲染时增加防御性判断 #

在调用map前先确认vendorsList是数组，同时记得给列表项加唯一key（React要求）：

{Array.isArray(vendorsList) && vendorsList.map(vendor => (
    <p key={vendor.id}>{vendor.name}</p>
))}

内容的提问来源于stack exchange，提问作者Meenatchi Sundaram.s 19