React组件调用API发起GET请求出现无限循环及res未定义报错的问题咨询

触发无限循环GET请求的原因 #

当前代码把API请求逻辑直接写在了组件函数体内部，没有做任何执行时机的控制。

• React组件每次发生状态更新（哪怕是代码里定义的setShow、setBestPodcasts、setData任意一个触发更新），都会重新执行整个组件函数
• 每次重渲染都会重新跑一遍client.fetchBestPodcasts的请求逻辑
• 请求成功后调用setData更新状态，又会触发下一次重渲染、下一次请求，最终形成无限循环

「res is not defined」报错的原因 #

res是.then()成功回调函数内部的局部作用域变量，仅在回调代码块执行的范围内可以被访问。

• 回调执行完成后，res这个临时变量就会被回收，在回调外部、组件其他作用域的代码里根本不存在这个变量
• 如果在回调外写类似res.data.name的读取逻辑，系统自然会提示res未定义
  代码里已经在回调中通过setData(res.data)把接口返回的内容存到了组件状态里，要读字段直接从状态里取就可以，不需要也不能访问已经失效的res变量。

正确的可实现代码 #

import { useState, useEffect } from 'react'

const Podcast = () => {
  const [show, setShow] = useState([])
  const [bestPodcasts, setBestPodcasts] = useState([])
  const [genre, setGenre] = useState('')
  // 初始值设为空对象，避免首次渲染读取属性时报错
  const [data, setData] = useState({})

  // 用useEffect包裹请求逻辑，控制执行时机
  useEffect(() => {
    client.fetchBestPodcasts({
      genre_id: '91',
      page: 2,
      region: 'us',
      safe_mode: 0,
    })
      .then((res) => {
        // 把返回数据存入状态
        setData(res.data)
        // 仅在回调内部可以正常访问res
        console.log(res.data);
      })
      .catch((error) => {
        console.log(error)
      })
  // 空依赖数组：仅在组件首次挂载完成后执行一次请求，不会触发无限循环
  }, [])

  // 读取接口字段的正确方式：直接从data状态取
  const targetName = data.name || ''
}

注意：如果后续需要把请求参数和状态绑定（比如切换genre时重新拉取数据），只需要把useEffect依赖数组里加上对应的状态变量即可，不要直接把请求留在组件函数体里。

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