axios React重复请求API数据

kwvwclae 于 2023-02-12 发布在 iOS

关注(0)|答案(1)|浏览(216)

我正在使用RapidAPI的API通过axios请求API数据。
我使用相对简单的代码遵循RapidAPI中提供的所有文档。然而，当我记录值时，它会反复请求数据，这反过来又会提高我从RapidAPI的请求，并使用大量资源和金钱。我不知道如何只检索一次值。以下是我的代码。

我的React .tsx文件

const [sportsData, setSportsData] = useState() 
const fetchSportsData = () => {
axios
  .request(testApi)
  .then((response) => {
    setSportsData(response.data)
  })
  .catch((error) => {
    console.log(error)
  })
} 
fetchSportsData()
console.log(sportsData)

我的API文件

export const testApi = {
method: 'GET',
url: 'https://api-football-v1.p.rapidapi.com/v3/timezone',
 headers: {
 'X-RapidAPI-Key': '-------removed on purpose ---------',
 'X-RapidAPI-Host': 'api-football-v1.p.rapidapi.com'
 }
}

我只是使用useState设置数据，但每次存储值时，它似乎都会重复重新渲染。我尝试了许多迂回的方法，但它似乎会一遍又一遍地重复请求。以前有人使用过RapidAPI的API吗？

axios

来源：https://stackoverflow.com/questions/75345699/react-repeatedly-requests-api-data

1条答案

按热度按时间

xxhby3vn1#

虽然我不知道为什么useState仍然会重复地使用axios检索API数据，但正如Sergey Sosunov所评论的，这是一种变通方法。

在React文件上

const [sportsData, setSportsData] = useState()

const fetchSportsData = () => {
axios.request(testApi).then((response) => {
    setSportsData(response.data)
  })
  .catch((error) => {
    console.log(error)
  })
}

useEffect(()=> {
  fetchSportsData()
},[])

在开发模式下，useEffect将在加载时运行两次，这取决于您的API提供程序，这可能意味着每次加载时调用API两次，这可能会使您的成本不必要地增加一倍，这只会发生在react文档中概述的开发模式下，您可以做的是包括一个useRef变量。

const firstRender = useRef(false)

useEffect(()=>{ 
  if (firstRender.current) {
    fetchSportsData()
  } else {
    firstRender.current = true;
  }
},[])

请记住，这段代码在生产环境中可能无法完美执行，因为useEffect只运行一次，而上面的代码需要运行两次才能在检索API调用之前将firstRender的状态更改为true。这只是为了帮助您降低开发成本。

赞(0）回复(0）举报 2023-02-12

我来回答

axios React重复请求API数据

1条答案

相关问题

热门标签

最新问答