时间戳

首页 > 解决方案 > axios获取请求无限循环

javascript - axios获取请求无限循环

问题描述

在我的函数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;

任何帮助表示赞赏！

标签： javascriptreactjsapiaxiosrequest

解决方案

从它的外观来看，您希望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;

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

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

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

推荐阅读