React项目中Fetch空数组加载控制及控制台日志重复问题咨询

问题1：保持加载状态直到获取有效非空数据 #

你当前代码的问题在于finally块会无条件关闭加载状态，哪怕后端返回的是空数组。要实现仅拿到有效非空数据时才结束加载，可以修改判断逻辑：

const [isLoading, setLoading] = useState(true);
const [markers, setMarkers] = useState([]);
const [fetchError, setFetchError] = useState(null); // 可选：用于展示错误提示

const getTowns = async () => {
    try {
        const response = await fetch(`${baseUrl}/towns`);
        // 先确保请求本身成功（状态码2xx）
        if (!response.ok) {
            throw new Error(`请求失败：${response.status}`);
        }
        const json = await response.json();
        // 检查返回的data是否为非空数组
        if (Array.isArray(json.data) && json.data.length > 0) {
            setMarkers(json.data);
            setLoading(false); // 只有拿到有效数据才关闭加载
        } else {
            console.warn("后端返回空数组");
            // 可选：如果需要自动重试，这里可以加定时器
            // setTimeout(getTowns, 3000); // 3秒后重新请求
        }
    } catch (error) {
        console.error(error);
        setFetchError(error.message);
        setLoading(false); // 错误场景下也关闭加载，避免无限加载
    }
};

useEffect(() => {
    getTowns();
}, []);

问题2：console.log多次输出的原因 #

主要是这两个场景导致的：

• React StrictMode 机制：开发环境下，React的StrictMode会重复调用组件函数、useEffect等，用来检测潜在的副作用问题，此时console.log会被执行两次，生产环境不会出现这个情况。
• 组件重复渲染：如果console.log写在组件顶层，每当组件因为状态变化（比如markers更新、isLoading变化）或父组件更新而重新渲染时，console.log都会跟着执行。

如果只想在拿到有效数据时打印，可以把日志放在监听markers的useEffect里：

useEffect(() => {
    if (markers.length > 0) {
        console.log("拿到有效城镇数据", markers);
    }
}, [markers]);

内容的提问来源于stack exchange，提问作者Roberto Muñoz Sánchez