axios获取请求无限循环

Question

在我的函数getFact() 中，我创建了一个 GET 并返回数据。我遇到的问题是请求无限循环，而不仅仅是一次。

这是我的代码：

import React, {useState} 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();

  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;

感谢任何帮助！

Answer 1

从它显示的内容来看，您希望在组件安装时运行getFact，即在组件的生命周期内运行一次。 要完成它，请使用带有空依赖数组的 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);
    });
  }

  // call getFact in a useEffect hook
  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;

在您的代码中，您直接在 Facts 功能组件的主体中调用 getFact 函数，这意味着将在每次渲染时调用 getFact。此外，您正在更新 getFact 函数中的状态 (setFact)，因此每当调用 getFact 时都会重新渲染组件。这会创建一个无限循环。

在上述方案中，getFact函数只会在组件挂载时调用。

您可以从这些资源中受益：

• useEffect hook
• Component lifecycle

Answer 2

您必须使用 useEffect 挂钩来处理 API 调用。无限调用的原因是因为您每次渲染组件时都调用getFact，并且在getFact 内进行状态更新。每次状态更新组件都会重新渲染，然后再次调用getFact，导致无限循环。

试试这样的：

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);
    });
  };

  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;

注意我是如何在useEffect 中调用getFact 的。只有在组件第一次渲染时它才会调用getFact。 useEffect 还接受依赖项列表，这将确定函数中指定的内容是否会运行。但是我传递了一个空数组作为我的依赖项。请参阅here，了解更多信息。