axios TypeError:data.map不是react中的函数

muk1a3rh  于 2023-02-12  发布在  iOS
关注(0)|答案(2)|浏览(150)

我尝试将数据Map为

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)
        }).catch(err => console.log(err))
    }, [])
  
  return (
    <div>
    
    {data.map(book => (
                <h1>{book.title}</h1>
            ))}
    </div>
  )
}

在控制台中,数据显示如下

{data: Array(100)}
data
: 
(100) [{…}, {…}, {…}, {…}, {…}, ]
[[Prototype]]
: 
Object

错误是

如何解决这个问题我尝试了很多方法,但都不起作用,请帮助我

rks48beu

rks48beu1#

console.log(res.data)显示它有一个数据对象,该数据对象组成数组,所以应该像setData(res.data.data)那样设置,目前正在设置对象,不能和map一起使用

0mkxixxg

0mkxixxg2#

您可以看到控制台的数据为{data:数组(100)}
所以你需要更新状态

setData(res.data.data)

相关问题