React中如何在useEffect执行后清除依赖变量且不触发重执行？

现有如下React代码片段，依赖状态fetchQuery变化时，useEffect会触发异步数据获取getDataModules：

useEffect(() => {
    // 用于获取数据的异步函数
    getDataModules(fetchQuery);
}, [fetchQuery]);

需求是在异步操作完成后清空fetchQuery（设为''），但直接调用setFetchQuery('')会因为依赖变化再次触发useEffect，导致无限循环，以下是几种可行方案：

方案一：用Ref标记清空操作触发的执行 #

通过Ref记录当前是否是主动清空状态导致的useEffect触发，以此跳过数据获取逻辑：

import { useEffect, useRef, useState } from 'react';

const [fetchQuery, setFetchQuery] = useState('');
// 标记是否为清空操作触发的useEffect
const isClearing = useRef(false);

useEffect(() => {
    // 如果是清空操作触发，重置标记并直接返回
    if (isClearing.current) {
        isClearing.current = false;
        return;
    }

    // 空查询无需执行
    if (!fetchQuery) return;

    const fetchData = async () => {
        await getDataModules(fetchQuery);
        // 标记即将执行清空操作
        isClearing.current = true;
        setFetchQuery('');
    };

    fetchData();
}, [fetchQuery]);

逻辑说明：主动清空fetchQuery前，先把Ref设为true，下一次useEffect触发时检测到该标记，就跳过数据获取逻辑，避免循环。

方案二：拆分触发状态与查询内容 #

将"是否触发查询"和"查询内容"拆分为两个独立状态，仅通过触发状态控制useEffect执行：

import { useEffect, useState } from 'react';

const [fetchQuery, setFetchQuery] = useState('');
const [shouldFetch, setShouldFetch] = useState(false);

useEffect(() => {
    // 未触发或无查询内容时直接返回
    if (!shouldFetch || !fetchQuery) return;

    const fetchData = async () => {
        await getDataModules(fetchQuery);
        // 重置触发状态并清空查询内容
        setShouldFetch(false);
        setFetchQuery('');
    };

    fetchData();
}, [shouldFetch, fetchQuery]);

// 触发查询的方法
const triggerFetch = (query) => {
    setFetchQuery(query);
    setShouldFetch(true);
};

逻辑说明：useEffect仅在shouldFetch为true时执行数据获取，完成后将shouldFetch设为false，此时即使清空fetchQuery，也不会再次触发useEffect执行。

方案三：直接通过查询内容的非空判断控制逻辑 #

这是最简单的方案，仅在fetchQuery非空时执行数据获取，清空后触发的useEffect会直接跳过：

import { useEffect, useState } from 'react';

const [fetchQuery, setFetchQuery] = useState('');

useEffect(() => {
    // 空查询直接跳过执行
    if (!fetchQuery) return;

    const fetchData = async () => {
        await getDataModules(fetchQuery);
        setFetchQuery('');
    };

    fetchData();
}, [fetchQuery]);

逻辑说明：当fetchQuery被清空为''时，useEffect会触发，但开头的非空判断会直接返回，不会执行数据获取和再次清空的逻辑，自然避免无限循环。需确保getDataModules处理空参数时不会报错。

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