useEffect Hook内部异步函数无法正常执行问题求助

核心问题点 #

• 匿名异步立即执行函数（IIFE）缺少调用符号：你定义的(async () => { ... })仅完成了函数声明，没有添加末尾的()执行调用，因此函数内部的请求、打印逻辑完全不会运行。
• useEffect未配置依赖数组：缺少第二个参数的useEffect会在组件每一次渲染完成后都重复执行回调，会触发无效的重复请求，甚至可能引发数据竞态问题。
• 缺少fetch响应合法性校验：fetch API仅在网络层面请求失败时才会抛出异常，HTTP状态码为4xx、5xx的请求不会进入catch分支，需要主动判断response.ok属性确认请求成功。

修复后代码 #

const [targets, setTargets] = useState([]);
useEffect(() => {
    console.log("Inside UseEffect");
    // 末尾添加()调用异步函数
    (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);
            // 新增响应合法性判断
            if (!response.ok) throw new Error('请求响应异常');
            let responseJson = await response.json();
            console.log(responseJson);
            setTargets(responseJson);
        } catch (error) {
            console.error(error);
        }
    })();
// 新增依赖数组，仅当经纬度变化时才重新触发请求
}, [region.latitude, region.longitude]);
console.log(targets);

补充说明 #

• 初始渲染时targets的默认值是空数组，useEffect回调在渲染完成后才会执行，且请求为异步操作，因此第一次console.log(targets)输出空是正常现象。等到异步请求完成调用setTargets后，组件会重新渲染，此时的console才会输出请求拿到的数组内容。
• 如果需要在组件卸载时中断未完成的请求，可以搭配AbortController实现请求取消，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Meana