React（Next.js）中无数据时调用map函数报错如何解决？

这个报错的核心原因是：当数据库无数据时，你的接口返回的res.data不是数组类型（可能是null、空对象{}或者其他非数组值），而你初始状态里trending是数组，但更新state后它变成了非数组，调用map方法自然会报错。

下面是几种可行的解决办法：

1. 确保赋值时始终是数组 #

在处理接口返回数据时，强制将trending转为数组类型，避免非数组值进入state：

componentDidMount() {
  axios.get('http://diggdevelopment.com/blackstallion_new/api/pin')
    .then(res => {
      // 检查返回数据是否为数组，不是则设为空数组
      const trending = Array.isArray(res.data) ? res.data : [];
      this.setState({ trending });
    })
    .catch(err => {
      // 处理请求失败的情况，比如设为空数组
      this.setState({ trending: [] });
      console.error('请求失败:', err);
    })
}

2. 渲染前先做类型校验 #

在render阶段，先确认trending是数组再调用map，双重保障：

render() {
  const { trending } = this.state;
  return (
    <>
      {Array.isArray(trending) && trending.map((post, index) => {
        // ...你的渲染代码
      })}
    </>
  )
}

3. 调试确认接口返回格式 #

建议先在then里打印res.data，看看无数据时接口到底返回了什么：

.then(res => {
  console.log('接口返回数据:', res.data);
  // 后续处理逻辑
})

比如有些接口无数据时会返回{code: 200, data: []}，这时候你需要取res.data.data而不是直接用res.data，这是很多新手容易踩的坑。

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