Question

我正在 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

Answer 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);
         }
     })()
 },[]);

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

1 个答案: