React中JSON数据映射报错：props.shows.map不是函数问题求助

阿华AIGC实验室

2026-5-21

解决React中props.shows.map不是函数的问题

1. 先揪出核心原因：你调用`map`的目标不是数组

这个报错的本质很简单——map是数组专属的方法，只有数组能调用它。你说另一组数据能正常运行，那大概率是两个接口的返回结构不一样：

正常的接口返回的是直接的数组，所以你直接map没问题；
而出问题的接口，返回的可能是一个嵌套了数组的对象（比如{ shows: [...] }或者{ data: [...] }），甚至在请求完成前props.shows还是undefined/null，这时候调用map自然会报错。

怎么快速验证？

在组件里加一行打印，看看props.shows到底是什么：

console.log("当前shows的数据：", typeof props.shows, props.shows);

如果输出是object但不是数组（比如是{}），那你得先从这个对象里把真正的数组取出来再map。比如接口返回{ shows: [...] }，那你就得写props.shows.shows.map(...)；如果是{ data: [...] }，就用props.shows.data.map(...)。

2. 处理异步加载时的空值坑

就算接口最终会返回数组，组件刚初始化的时候，异步请求还没完成，props.shows可能是undefined或者null，这时候调用map也会炸锅。给你几个实用的解决办法：

用短路求值做判断：

{props.shows && props.shows.map(item => (
  <div key={item.id}>{item.name}</div>
))}

用可选链操作符（更简洁）：

{props.shows?.map(item => (
  <div key={item.id}>{item.name}</div>
))}

给props设默认数组（函数组件适用）：

function ShowList({ shows = [] }) {
  return (
    <div>
      {shows.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

3. 检查请求响应的处理逻辑

如果你是自己写的请求代码，看看是不是处理响应的时候漏了解构：
比如正常接口直接返回数组，你直接赋值给shows；但出问题的接口需要先取出数组字段，你却把整个响应对象赋值给shows了。举个fetch的例子：

// 正常接口的处理（返回数组）
fetch('正常接口地址')
  .then(res => res.json())
  .then(data => setShows(data)); // 直接赋值数组

// 有问题的接口（返回带数组的对象）
fetch('出问题的接口地址')
  .then(res => res.json())
  .then(data => setShows(data.shows)); // 要先取出数组部分再赋值