React项目中myData.map is not a function错误解决方案求助

错误原因 #

调用https://dummyjson.com/products接口返回的是一个包含products数组的对象（结构类似{ products: [...], total: ... }），你直接把整个响应对象赋值给了myData，导致myData变成了对象类型，而对象没有map方法，因此触发该错误。

修复步骤 #

1. 修正数据赋值逻辑
   把接口返回的products数组赋值给myData，修改useEffect中的代码：

   useEffect(() => {
     axios
       .get("https://dummyjson.com/products")
       .then((response) => setMyData(response.data.products)) // 取response.data中的products数组
   }, []);
   

2. 添加安全渲染判断（可选但推荐）
   在渲染时先判断myData是否为数组，避免接口返回异常时再次触发错误：

   <div className="grid">
     {Array.isArray(myData) && myData.map((post) => {
       const { id, title } = post;
       return (
         <div key={id} className="card">
           <h2>{title}</h2>
         </div>
       );
     })}
   </div>
   

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