React应用突发TypeError读取length属性报错，请求排查帮助

我的React应用此前运行正常，突然出现如下错误：

下方代码曾正常工作，现在却触发上述错误，我无法定位问题所在，恳请协助排查。我希望在餐厅数据加载完成前向用户展示Shimmer UI（即<Shimmer />组件）。

import RestaurantCard from "./RestaurantCard";
import { useState, useEffect } from "react";
import Shimmer from "./Shimmer";
import { RESTAURANT_FETCH_API_LINK } from "../utils/constants";

const Body = () => {

  const [dataToRender, _setDataToRender] = useState([]);
  const [filterdData, _setFilterdData] = useState([]);

  useEffect(() => {
    fetchData();
  },[]);

  const fetchData = async () => {
    const data = await fetch(RESTAURANT_FETCH_API_LINK); // fetch() --> returns a Promise

    const dataJSON = await data.json();

    const valueToRender =
      dataJSON?.data?.cards[4]?.card?.card?.gridElements?.infoWithStyle?.restaurants;
    _setDataToRender(valueToRender);
    _setFilterdData(valueToRender);
  };

  return dataToRender.length === 0 ? (
    <Shimmer />
  ) : (
    <div className="body">
      <div className="res-container">
        {filterdData?.map((resEle) => {
          return (
            <RestaurantCard resObejectData={resEle} key={resEle.info.id} />
          );
        })}
      </div>
    </div>
  );
};

export default Body;

问题排查与修复方案 #

1. 核心问题分析 #

从错误截图和代码来看，根源是API返回的数据结构发生了变化，导致valueToRender变成undefined。而你用dataToRender.length === 0判断是否显示Shimmer——当dataToRender为undefined时，访问length会触发Cannot read properties of undefined (reading 'length')错误，也就是你看到的报错。另外代码里存在拼写错误：filterdData应为filteredData（虽不影响运行，但建议修正）。

2. 具体修复步骤 #

• 修正状态初始化与渲染判断逻辑：
  将dataToRender初始值设为null，先判断状态是否为未加载完成的null，再处理渲染：

  const [dataToRender, _setDataToRender] = useState(null);
  const [filteredData, _setFilteredData] = useState(null); // 修正拼写错误
  
  // ...
  
  return dataToRender === null ? (
    <Shimmer />
  ) : (
    <div className="body">
      <div className="res-container">
        {filteredData?.map((resEle) => {
          return (
            <RestaurantCard resObejectData={resEle} key={resEle.info.id} />
          );
        })}
      </div>
    </div>
  );
  

• 增强API数据容错性：
  给valueToRender设置默认空数组，避免API结构变化时返回undefined：

  const valueToRender =
    dataJSON?.data?.cards[4]?.card?.card?.gridElements?.infoWithStyle?.restaurants || [];
  

• 可选：添加请求错误处理：
  避免请求失败时页面一直显示Shimmer，用try/catch捕获异常：

  const fetchData = async () => {
    try {
      const data = await fetch(RESTAURANT_FETCH_API_LINK);
      if (!data.ok) throw new Error(`请求失败：${data.status}`);
      const dataJSON = await data.json();
      const valueToRender =
        dataJSON?.data?.cards[4]?.card?.card?.gridElements?.infoWithStyle?.restaurants || [];
      _setDataToRender(valueToRender);
      _setFilteredData(valueToRender);
    } catch (err) {
      console.error('加载餐厅数据失败：', err);
      _setDataToRender([]); // 错误时显示空状态或自定义错误组件
    }
  };
  

3. 为什么之前正常现在报错？ #

大概率是你调用的第三方API调整了返回的cards数组结构——之前cards[4]是包含商家列表的卡片，现在这个位置的卡片被移除或替换，导致链式访问后拿到undefined，最终触发渲染错误。

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