异步函数在 UseEffect Hook 中不起作用答案

【问题标题】：Async function not working inside UseEffect Hook异步函数在 UseEffect Hook 中不起作用
【发布时间】：2021-09-05 01:08:39
【问题描述】：

我正在 useEffect 回调中创建一个异步函数。但是由于某种原因，每次组件渲染时，我只能看到第一个控制台的输出。并且执行控制永远不会进入异步函数内部。因此最后返回空数组。

const [targets, setTargets] = useState([]);
useEffect(() => {
    console.log("Inside UseEffect"); //logs the output
    (async () => {
        var url = `https://xx.yy.zz/?param={"request_type":"query_osm_circle","lat":${region.latitude},"lng":${region.longitude},"radius":3,"limit":10}`;
        try {
            let response = await fetch(
                url,
            );
            let responseJson = await response.json();
            console.log(responseJson); //does not log the output
            setTargets(responseJson);
        } catch (error) {
            console.error(error);
        }
    })
});
console.log(targets); //returns empty array

【问题讨论】：

你没有在 useEffect 中调用你的函数。您应该为您的 useEffect 放置一个空的 dep 数组（如果您希望它只运行一次）并在此之前调用您创建的函数。
你需要调用它，比如：(async () => { ... })()注意最后一个()！

标签： javascript react-native api async-await react-hooks

【解决方案1】：

 useEffect(() => {
     console.log("Inside UseEffect"); //logs the output
     (async () => {
         var url = `https://xx.yy.zz/?param={"request_type":"query_osm_circle","lat":${region.latitude},"lng":${region.longitude},"radius":3,"limit":10}`;
         try {
             let response = await fetch(
                 url,
             );
             let responseJson = await response.json();
             console.log(responseJson); //does not log the output
             setTargets(responseJson);
         } catch (error) {
             console.error(error);
         }
     })()
 },[]);

【讨论】：