React应用API请求无限触发致网站卡顿问题求助

嘿，一眼就揪出问题根源了——你的useEffect钩子没有设置依赖数组，这就是API被无限调用、网站卡顿的罪魁祸首！

问题原因拆解 #

React的useEffect如果不指定依赖数组，会在每次组件渲染完成后都执行一遍。你的逻辑里：

1. useEffect调用API，拿到数据后执行setData(data)更新状态
2. 状态更新触发组件重新渲染
3. 渲染完成后useEffect又再次执行，重复调用API、更新状态、触发渲染……
   就这样形成了无限循环，浏览器被反复请求拖垮，自然会卡顿。

解决方案：给useEffect添加依赖数组 #

你的API URL是根据drop的值动态变化的，所以只需要把drop作为依赖项放进数组里——这样只有当drop的值改变时，useEffect才会重新执行，调用新的API。

修改后的完整代码：

//importing components
import Main from './components/Main/Main'
import Second from './components/Second/Second'
//import style
import './App.scss'

const App = () => {
  const [data, setData] = useState()
  const [drop, setDrop] = useState(null)
  
  const getValue = (e) => {
    setDrop(e.target.value)
  }

  console.log(data + ' here is the data')

  // 👇 关键修改：添加依赖数组[drop]
  useEffect(() => {
    let URL;
    if (drop === null) {
      URL = 'https://disease.sh/v3/covid-19/all'
    } else {
      URL = `https://disease.sh/v3/covid-19/countries/${drop}?strict=true`
    }
    
    // 建议添加错误处理，避免请求失败时崩溃
    fetch(URL)
      .then(res => {
        if (!res.ok) throw new Error('API请求失败')
        return res.json()
      })
      .then(data => setData(data))
      .catch(err => console.error('请求出错：', err))
  }, [drop]) // 👈 仅当drop变化时，才重新执行这个effect

  return (
    <div className="wrapper" >
      <div className="first">
        {/* 可以添加加载状态，提升用户体验 */}
        {data === undefined ? 
          <div>加载中...</div> : 
          <Main info={data} getValue={getValue} />
        }
        <button onClick={() => { console.log(drop) }}>testing</button>
        <button onClick={() => { console.log(data) }}>testing API</button>
        {/* 用可选链操作符避免data未定义时报错 */}
        <button onClick={() => { console.log(data?.deaths) }}>testing deaths</button>
      </div>
      <div className="bla">
        <Second />
      </div>
    </div >
  )
}
export default App

额外小提示 #

1. 错误处理：fetch不会在HTTP错误状态（比如404、500）时自动抛出错误，手动检查res.ok可以避免解析无效响应导致的崩溃。
2. 加载状态：在data未获取到时显示加载提示，能让用户更清楚当前状态。
3. 可选链操作符：data?.deaths可以避免data为undefined时访问deaths属性抛出的错误。

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