设置数据时.map不是React中的函数错误

Question

我正在学习反应并有以下观察。

我无法理解错误背后的原因。

我有下面的代码 -

反应：

useEffect(()=>{
    console.log()
    axios.get('http://localhost:8000/api/records/').then((data) => {console.log('server returned ... ',typeof(data));setRecords(data)}
    ).catch( e => console.log(e))
    
},[])

 const [records,setRecords] = useState([]);

1. 当仅data在侧面使用时then clause in axios，我收到以下错误，Uncaught TypeError: records.map is not a function

2. 但是，当我更改如下代码时 - 请注意{data}而不是仅仅data，上述错误得到解决。

   axios.get('http://localhost:8000/api/records/').then(({data}) => {...}

有人可以解释一下上述行为吗？

我尝试打印type of variable data，但在这两种情况下它都是object

{data}为什么当使用 代替时上述错误消失了{data}

表达：

const express = require('express')
const app = express()
var cors = require('cors')
const port = 8000
app.use(cors())


const Records = [
    {
        recordName:'First Record',
        artistName:'First Artist',
        description: 'First Artist Description'
    },
    {
        recordName:'Second Record',
        artistName:'Second Artist',
        description: 'Second Artist Description'
    }

]

app.get('/api/records', (req, res) => {
  res.send(Records)
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Answer 1

尝试如下设置您的数据，因为在 axios 中我们在对象中收到响应

  const [records,setRecords] = useState([]);
  useEffect(()=>{
        console.log()
        axios.get('http://localhost:8000/api/records/').then((resData) => {console.log('server returned ... ',typeof(resData));setRecords(resData.data || [])}
        ).catch( e => console.log(e))
        
   },[])