React调用对象数组API时map函数报错的问题求助

我是React新手，调用返回对象数组的API时，用map处理数据出现错误：Uncaught TypeError: benchmarkData.map is not a function。日志显示已获取到目标数据，但这个错误会阻止其他元素加载。

API返回结构 #

[{"type":"drgmbmk","test":"5782","DEAANTA":"412","DEGEMAT":"235","DEGEMGW":"97.7","DEGEMMB":"3.39","DEGEMNV":"64.1","DEGEMSD":"13.2","DEGEMVD":"71.3","DEJAART":"2022","DELTMCE":"-","DEWEENR":"1"},{"type":"drgmbmk","test":"5782","DEAANTA":"436","DEGEMAT":"233","DEGEMGW":"120.1","DEGEMMB":"3.38","DEGEMNV":"64.2","DEGEMSD":"13.2","DEGEMVD":"71.4","DEJAART":"2022","DELTMCE":"ALL","DEWEENR":"1"},{"type":"drgmbmk","test":"5782","DEAANTA":"22","DEGEMAT":"213","DEGEMGW":"99.9","DEGEMMB":"3.23","DEGEMNV":"64.9","DEGEMSD":"12.7","DEGEMVD":"72.8","DEJAART":"2022","DELTMCE":"BBC","DEWEENR":"1"}]

处理数据的React代码 #

useEffect(() => {
    if (benchmarkData) {
      setSupplierHasData(true);
      let loadingplaceFilter = [];
      const loadingPlaces = [];
      benchmarkData.map(item => { //!start of requested question code
        if(item.type === "drlvbmk") {
           loadingPlaces.push(item.DELPLCE, item.DELTMCE, item.DEELTCE)
        }
      }
      ); //!end of requested question code
      console.log(loadingPlaces);

      const uniqueLoadingplaces = [];
      loadingPlaces.map((item) => {
        var findItem = uniqueLoadingplaces.find((x) => x === item);
        if (!findItem) uniqueLoadingplaces.push(item);
      });
      console.log('uniqueloadingplaces', uniqueLoadingplaces);


      setFilters({
        ...filters,
        loadingplaces: loadingplaceFilter,
      });

      setFilterData(true);

  }, [benchmarkData]);

API请求代码 #

useEffect(() => {
    const fetchBenchmarkData = async () => {
      setFetchNewData(false);
      console.log('current user active id :', suppliersState.suppliers.activeID, "current user active uuid:  ", suppliersState.suppliers.activeUUID);
      try  {
        await axios
      
          .get(
            `https://bpg-ap.ddev.site/jsonapi/benchmarking_get_data?supplierid=${suppliersState.suppliers.activeID}&date_from=1&date_to=2022`
          )
          .then(res => {
            setBenchmarkData(res.data);
            console.log('BENCHMARKINGRESULTAAT : ', res.data);
          });
        } catch(error) {
          setSupplierHasData(false);
          setChartData({});
            console.log(error);
        }
    };
    if (benchmarkData === null) {
      console.log('useEffect fired, fetch benchmarkData', benchmarkData);
      fetchBenchmarkData();
    } 
  }, [benchmarkData, suppliersState.suppliers.activeID]);

日志说明 #

benchmarkData日志显示已获取到数组格式的数据。

问题原因及解决方法 #

1. 初始化值错误：检查benchmarkData的初始状态，如果初始值是null而非空数组，第一次渲染时benchmarkData不是数组，调用map会直接报错。

   • 解决：将benchmarkData的初始状态设为[]（空数组），空数组调用map不会报错，且不影响后续数据加载。

2. 数据类型校验缺失：即使日志显示是数组，也可能存在API返回非数组的异常情况（比如错误时返回对象），导致赋值后benchmarkData不是数组。

   • 解决：在设置状态前校验数据类型：

     .then(res => {
       if (Array.isArray(res.data)) {
         setBenchmarkData(res.data);
       } else {
         setBenchmarkData([]);
         console.error('API返回数据不是数组:', res.data);
       }
     });
     

3. 条件判断不严谨：原代码用if (benchmarkData)判断，若benchmarkData是对象（非数组）也会进入逻辑，导致map报错。

   • 解决：改为判断数组类型：

     useEffect(() => {
       if (Array.isArray(benchmarkData)) {
         // 后续处理逻辑
       }
     }, [benchmarkData]);
     

4. 额外逻辑问题：代码中判断item.type === "drlvbmk"，但API返回的type是"drgmbmk"，这会导致loadingPlaces始终为空，需修正类型匹配值。

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