SearchExercises.js报错：bodyPartsData不可迭代问题求助

错误根源 #

报错的核心原因是**fetchData函数里的response.json()没有加await**，导致bodyPartsData拿到的不是接口返回的数组，而是一个Promise对象。而展开运算符...只能用于数组、字符串这类可迭代对象，Promise不可迭代，所以触发了TypeError。

修复步骤 #

1. 修正fetchData函数 #

给response.json()加上await，确保拿到实际的接口返回数据：

export const fetchData = async (url, options) => {  
  const response = await fetch(url, options);  
  const data = await response.json(); // 新增await，等待JSON解析完成

  return data;  
}; 

2. 增加防御性代码（可选但推荐） #

为了避免接口返回非数组数据的情况，在设置状态时做兜底处理：

useEffect(() => {  
  const fetchExercisesData = async () => {  
    try {
      const bodyPartsData = await fetchData('https://exercisedb.p.rapidapi.com/exercises/bodyPartList', exerciseOptions);  
      // 确保bodyPartsData是数组，否则用空数组兜底
      setBodyParts(['all', ...(Array.isArray(bodyPartsData) ? bodyPartsData : [])]);  
    } catch (error) {
      console.error('获取身体部位数据失败:', error);
      // 出错时仅保留默认的'all'选项
      setBodyParts(['all']);
    }
  };  

  fetchExercisesData();  
}, []); 

补充说明 #

response.json()本身是异步操作，返回一个Promise，必须用await等待它解析完成，才能拿到真正的JSON数据。之前的代码直接返回这个Promise，导致后续用展开运算符处理时，操作的是Promise对象而非数组，自然会报错。

内容的提问来源于stack exchange，提问作者Josh Ivan Lanuevo