React对接Spotify API渲染时出现map读取undefined报错如何处理

• 很多开发者刚接触React18时，会把StrictMode开发环境下双重挂载、执行组件逻辑的行为当成报错的元凶，实际上这个内置检测逻辑只是帮开发者更早暴露代码里的空值、副作用问题，不是报错的直接诱因。
• 这个报错的核心本质是代码没有对异步数据的未就绪状态做兼容：
  1. Spotify的身份鉴权、业务接口数据返回全是异步流程，组件首次完成挂载渲染时，props.userData往往还处于未赋值的undefined或空对象状态
  2. 原代码直接执行const favorites = Object.values(userData)[0]做取值，没有对userData的空状态做兜底，最终拿到的favorites本身就是undefined
  3. 渲染阶段直接对这个undefined值调用.map方法，就触发了读取未定义属性的报错。组件双重加载的行为只是让这个本来就会出现的空值错误更早暴露，就算没有双重加载，只要渲染时机早于异步数据返回，一样会报同样的错。

• 核心思路是让所有参与渲染的变量永远处于可用状态，不要在渲染流程中被动捕获错误：
  1. 给深层取值链路加空值兜底，从源头避免拿到undefined
     原代码的取值逻辑鲁棒性很差，可以改成带空值兜底的安全写法，保证最终拿到的favorites永远是可遍历的数组：

  // 原脆弱写法：userData不存在时执行就会抛出空值错误
  // const userData = props.userData;
  // const favorites = Object.values(userData)[0];
  
  // 安全写法：全链路空值兼容
  // 如果userData为空就传入空对象，取到的第一个值不存在时就兜底为空数组
  const userData = props.userData ?? {};
  const favorites = Object.values(userData)?.[0] ?? [];
  

  2. 增加渲染前置状态判断，不同数据状态下展示对应内容
     不要不管数据有没有回来都硬渲染列表结构，可以在遍历前加判断：如果当前拿到的收藏列表是空数组，就展示加载提示、空状态提示，等数据就绪后再渲染完整列表。
  3. 修正后的完整组件参考实现：

  import React from 'react';
  
  function List(props) {
      const userData = props.userData ?? {};
      const favorites = Object.values(userData)?.[0] ?? [];
  
      // 数据未就绪时展示友好提示，不执行列表渲染逻辑
      if (favorites.length === 0) {
          return <div>正在加载你的收藏歌曲列表...</div>
      }
  
      return (
          <div>
              <p>Your favorite songs are:</p>
              <ul>
                  {favorites.map( (item) => (
                      <li key={item.id}>{item.name}</li>
                  ))}
              </ul>
          </div>
      );
  }
  
  export default List;
  

• 不推荐的实现方式：
  不要用代码里注释的try/catch块去兜渲染阶段的遍历错误，这种方式是被动捕获运行时错误，很容易导致组件渲染中断，远不如在取值阶段就做好空值兜底的主动式实现可靠。

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