React:Cannot read properties of undefined(reading 'map')报错解决

Popular.jsx:26 Uncaught TypeError: Cannot read properties of undefined (reading 'map') 触发的核心原因是：调用.map()方法的popular状态值在某次渲染时为undefined，而非数组类型。
你初始给popular设置的默认值是空数组，首次渲染本不会触发该错误，但API请求返回异常时，data.recipes会是undefined，执行setPopular(data.recipes)会直接把popular状态更新为undefined，组件重渲染时调用undefined.map()就会抛出该错误。常见触发场景包括API密钥无效、接口请求失败、返回结构不符合预期。

• 给API请求加错误捕获和数据校验，从状态更新源头避免undefined
  改造getPopular方法，增加异常捕获和返回值兜底，修改后代码如下：

  const getPopular = async () => {
    try {
      const api = await fetch(
        `https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_API_KEY}&number=9`
      );
      if (!api.ok) throw new Error('接口请求异常');
      const data = await api.json();
      // 仅当返回的recipes字段为数组时才写入状态，否则兜底为空数组
      setPopular(Array.isArray(data.recipes) ? data.recipes : []);
    } catch (err) {
      console.error('获取热门菜谱数据失败:', err);
      // 请求出错时强制将popular置为空数组，避免状态为undefined
      setPopular([]);
    }
  };
  

• 渲染层增加类型判断，做双重兜底
  调用.map()前先判断popular是否为数组，同时给循环项加唯一key属性（React列表渲染要求，避免渲染异常），修改后轮播部分代码如下：

  <Splide
    options={{
      perPage: 4,
      arrows: false,
      pagination: false,
      drag: 'free',
      gap: '5rem'
    }}
  >
    {Array.isArray(popular) && popular.map((recipe) => {
      return (
        <SplideSlide key={recipe.id}>
          <Card>
            <p>{recipe.title}</p>
            <img src={recipe.image} alt={recipe.title} />
          </Card>
        </SplideSlide>
      );
    })}
  </Splide>
  

• 修复样式拼写错误，避免后续样式展示异常
  你写的Card样式里存在两处拼写问题：
  • overFlow: hidden; 改为 overflow: hidden;（CSS属性名拼写错误）
  • position: absoute; 改为 position: absolute;（属性值拼写错误，缺字母l）
• 校验环境变量配置
  你代码中已经加了console.log(process.env.REACT_APP_API_KEY)，先查看控制台打印值：如果输出undefined说明环境变量未正确加载，注意以下规则：
  • Create React App 项目中，环境变量需要定义在项目根目录的.env文件中
  • 自定义环境变量必须以REACT_APP_为前缀
  • 修改.env文件后必须重启本地开发服务器，配置才会生效

框架提示的「添加错误边界」属于React应用的健壮性优化手段，作用是捕获子组件抛出的渲染错误、避免整个应用白屏，属于可选优化项，不是解决当前map报错的必须操作，优先修复上述问题即可。

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