React中TypeError: data.map is not a function错误的解决求助

错误原因 #

你遇到的问题核心在于：API返回的res.data是一个包裹着数组的对象（结构为{data: Array(100)}），但你直接将整个对象赋值给了data状态。而map是数组专属的方法，对象无法调用该方法，因此抛出类型错误。

解决方案 #

修改useEffect中的setData调用，提取对象内部的数组赋值给状态：

axios.get('http://127.0.0.1:8000/api/books').then(res => {
  console.log(res.data)
  // 取出对象中的数组部分赋值给状态
  setData(res.data.data)
}).catch(err => console.log(err))

修改后的完整代码 #

import React from 'react'
import axios from 'axios'
import {useEffect, useState} from 'react'

export default function Home() {
  const [data, setData] = useState([])
  useEffect(() => {
    axios.get('http://127.0.0.1:8000/api/books').then(res => {
      console.log(res.data)
      setData(res.data.data)
    }).catch(err => console.log(err))
  }, [])
  
  return (
    <div>
      {data.map((book, index) => (
        // 添加唯一key属性，符合React列表渲染规范
        <h1 key={index}>{book.title}</h1>
      ))}
    </div>
  )
}

额外提示 #

• 优先使用数据本身的唯一标识（比如book.id）作为key值，比index更稳定，避免列表更新时出现异常。
• 可以通过可选链语法data?.map(...)处理请求未完成时的空值情况，进一步提升代码健壮性。

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