React native: React State连续调用另一个组件中的API

Question

我制作了一个函数组件来从API返回数据。目的是在我的整个应用程序中使用它。下面的代码将仅向您展示结构(实际代码使用graphQL并包含安全凭据)

async function GetData() {
console.log("function called")
try {
return await fetch('https://www.7timer.info/bin/astro.php?lon=113.2&lat=23.1&ac=0&unit=metric&output=json&tzshift=0')

} catch (err) 
{ console.log('error fetching data from Source', err) }
}
export default GetData

我这样称呼它:

进口:

import { useState} from 'react';
import GetData  from "./components/getData";

组件内部:

const [data, setData]= useState([]);
function pullData(){
GetData().then((result)=>{  
setData(result);});
}
pullData()

这是怎么做的，它得到数据，但不断地提出请求(输出在控制台"函数调用")。我知道这是反应状态。但我一次只需要一个结果(以及graphQL提供的任何更新)，仅此而已。

有办法吗?

Answer 1

你的函数被连续调用，因为它将在每次重新渲染时运行，并且在每次重新渲染时被调用。

考虑将逻辑包装在useEffect钩子中，以控制何时调用该函数:https://reactjs.org/docs/hooks-effect.html

useEffect(() => {
const pullData = async () => {
GetData().then((result) => {  
setData(result);
});
}
pullData()
}, [])

如果你想运行一个效果并且只清理一次(在挂载和卸载时)，你可以传递一个空数组([])作为第二个参数。