React替换MSW假数据为Django REST API时遇map报错求助

问题本质 #

你碰到的undefined is not a function错误，就是代码里对一个undefined的值用了.map()——显然Django返回的数据结构和之前MSW模拟的不一样，前端接收后找不到预期的数组。

一步步排查 #

• 先抓Django返回的原始数据
  打开浏览器DevTools的Network面板，找到那个请求，看Response标签里的真实数据。比如之前MSW可能直接返回[{id:1, name:"xxx"}, ...]数组，但Django REST Framework默认会返回带分页的对象：{"count":2, "next":null, "previous":null, "results": [{id:1, name:"xxx"}, ...]}。

• 检查前端数据处理逻辑
  找到你写.map()的地方，确认是不是直接对整个响应对象调用map了。比如Django返回的是带results的结构，那你得改成response.data.results.map(...)，而不是response.data.map(...)。

• 打印响应数据看清楚
  在useAPI的请求代码里加个打印：

  const response = await fetch('http://localhost:8000/api/your-path/');
  const data = await response.json();
  console.log('Django返回的数据:', data);
  

  看看打印出来的是数组还是对象，有没有你需要的数组字段。

• 对比MSW的旧数据结构
  翻之前的MSW mock代码，比如：

  rest.get('/api/old-path/', (req, res, ctx) => {
    return res(ctx.json([{id: 1, title: '测试数据'}]))
  })
  

  把这个和Django返回的结构对比，找出不一样的地方，调整前端代码适配。

• 加个兜底避免报错
  就算Django返回200，也可能返回空数据或者字段缺失，调用.map()前先做判断：

  (data?.results || []).map(item => { /* 你的渲染逻辑 */ })
  

  用可选链?.和默认空数组|| []，就算数据不对也不会崩。

适配DRF的分页结构 #

如果用了Django REST Framework的ListAPIView或ModelViewSet，默认会分页。要是不需要分页，直接在Django视图里关了：

from rest_framework.pagination import PageNumberPagination

class NoPagination(PageNumberPagination):
    page_size = None

class YourModelViewSet(viewsets.ModelViewSet):
    pagination_class = NoPagination

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