React同Git代码本地运行Books页报map读取undefined错误

报错直接原因是执行books.data.map()时books.data为undefined。你现有代码仅判断了books本身是否为真值，没有校验books.data是否存在，一旦接口返回结构不符合预期就会触发报错。
同一份代码仅你本地复现，本质是本地环境/本地请求返回结果和其他组员不一致，按下面的步骤排查即可。

排查优先级（按耗时从短到长排序） #

• 先查接口响应：打开浏览器F12的Network面板，筛选XHR/fetch请求，找到/books接口的响应结果
  • 如果接口状态码不是200（比如401、403、500、跨域报错）：说明请求没成功，检查本地存储的登录token（user.jwt）是否过期、config/config里的baseApiUrl是不是被误改、本地有没有开代理/抓包工具拦截了请求
  • 如果接口返回200，但响应体里没有data字段：说明你连的后端服务和其他组员用的不一致，检查是不是本地启动的后端分支不对、后端服务没重启、测试环境数据被改动
• 再查自定义Hook默认值：打开../../services/useXmlHttp源码，看data的初始值设置。如果初始值是空对象{}，第一次组件渲染时books是空对象，能通过{books && ...}的判断，但books.data是undefined，直接调用map就会报错。其他组员没复现大概率是他们的接口响应速度快，在首次渲染前就拿到了带data字段的完整返回，你本地因为接口慢/请求失败，一直停留在初始值状态就触发了报错
• 最后查依赖版本：删掉本地node_modules和lock文件（package-lock.json/yarn.lock/pnpm-lock.yaml），用和组员完全一致的包管理器重新安装依赖，排除本地依赖版本不一致导致的Hook行为异常

代码层面永久修复 #

不管是哪种环境问题，异步渲染的列表必须加兜底判断，从代码层面避免这类报错，这是React开发的常规规范：
把原来的列表渲染代码改成带可选链兜底的写法即可：

<div className="book-list">
  {books?.data?.map((book) => (
    <NavLink 
      key={book.book_id} 
      className={({isActive}) => isActive ? "active" : ""} 
      to={`/books/${book.book_id}`} 
    >
      <span>&nbsp;</span>
      <div>{book.title}</div>
    </NavLink>
  ))}
</div>

如果项目配置不支持可选链语法，换成常规判断：

<div className="book-list">
  {books.data && Array.isArray(books.data) && books.data.map((book) => (
    <NavLink 
      key={book.book_id} 
      className={({isActive}) => isActive ? "active" : ""} 
      to={`/books/${book.book_id}`} 
    >
      <span>&nbsp;</span>
      <div>{book.title}</div>
    </NavLink>
  ))}
</div>

更稳妥的做法是在useXmlHttp Hook里给data设置符合接口结构的初始值，比如把data初始值设为{ data: [] }，首次渲染时books.data是空数组，调用map不会报错，也不会出现空白闪屏的问题。

这类同仓库代码仅本地报错的问题，不要先死磕组件逻辑，先看网络面板的接口返回，80%的情况10分钟内就能定位到原因。

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