如何解析axios返回的response.data并解决接口请求无限循环问题

• 无限循环的核心原因是你把loadSpots()直接写在了组件函数的顶层作用域：React每次组件重渲染都会重新执行顶层代码，接口请求完成后更新state会再次触发组件重渲染，重渲染又会重新调用接口，直接形成「调用接口→更新state→重渲染→再次调用接口」的死循环。
• 你写的for循环遍历操作完全多余：接口返回的response.data本身就是目标数组，不需要逐元素push到新数组里。第二种写法里在循环内反复调用setSpots(data[i])是错误逻辑，setSpots是覆盖式更新，循环执行完state只会保留数组最后一个元素，还会多次触发无意义的重渲染。
• 第一种写法用组件顶层的普通let变量存数据不符合React运行逻辑：每次组件重渲染都会重置这个变量为初始空数组，根本无法持久化存储接口返回的数据。

接口请求逻辑要放在useEffect里执行，配置正确的依赖项，保证只在需要的时候触发请求，不要在顶层直接调用请求函数。完整代码如下：

import { useState, useEffect } from 'react'

// 组件内部代码
// 初始化state为空数组，避免后续访问数组属性时报undefined错误
const [spots, setSpots] = useState([])
const [loading, setLoading] = useState(false)

useEffect(() => {
  const fetchSpots = async () => {
    setLoading(true)
    try {
      const response = await api.get('spot/freeSpot', {
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      })
      // 直接把接口返回的数组赋值给state即可，不需要额外遍历
      setSpots(response.data)
    } catch (err) {
      console.error('获取点位数据失败：', err)
    } finally {
      setLoading(false)
    }
  }

  fetchSpots()
  // accessToken如果是组件内的状态/变量，必须加入依赖数组
}, [accessToken])

等接口请求完成、spots被赋值后，就可以正常操作数组获取目标字段：

• 访问指定位置元素的字段：用可选链?.规避空值报错，比如取第一个点位的名称：spots[0]?.spotName
• 遍历渲染列表：

{
  spots.map(spot => (
    <div key={spot.id}>
      <p>点位名称：{spot.spotName}</p>
      <p>点位状态：{spot.status}</p>
    </div>
  ))
}

• 过滤目标元素：比如筛选出可预约的点位

const availableSpots = spots.filter(spot => spot.canBook === true)

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