React函数组件内Axios GET请求出现无限循环如何解决？

问题根因 #

你将getFact()直接写在了组件函数的顶层，每次组件渲染都会执行该函数。getFact请求完成后会更新组件状态，状态更新又会触发组件重新渲染，由此形成无限循环。

修复方案 #

引入React的useEffect钩子，把初始的接口调用逻辑放在useEffect中，指定空依赖数组即可保证初始请求仅在组件首次挂载完成后执行一次，不会触发循环。
修改后完整代码如下：

import React, { useState, useEffect } from "react";
import axios from "axios";

function Facts() {

  const [fact, setFact] = useState("");
  const [source, setSource] = useState("");
  const [id, setID] = useState("");

  function getFact() {
    axios.get("https://exampleAPI.com/",  { crossdomain: true }).then(response => {
      setFact(response.data[0].fact);
      setSource(response.data[0].sources);
      setID(response.data[0].id);
    });
  }

  // 替换原来直接调用的getFact()
  useEffect(() => {
    getFact();
  }, []);

  return (
    <div>
      <h1 class="text-light fw-light landing-text">{id}</h1>
      <p class="text-light">fact number</p>
      <hr class="text-light" />
      <h1 class="text-light fw-light landing-text">"{fact}"</h1>
      <a class="text-light text-decoration-none" href={source} target="_blank" rel="noopener noreferrer">source</a>
      <br />
      <br />
      <button class="btn btn-lg btn-outline-light" onClick={getFact}>
          Next Fact
      </button>
    </div>    
  )
}

export default Facts;

修改后按钮点击触发拉取新事实的逻辑不受影响，可正常使用。

内容的提问来源于stack exchange，提问作者Cool cow facts