TypeScript React：调用handleReset时如何跳过useEffect执行

你的代码失效核心在于setValues是异步操作：React不会在调用setValues后立刻更新状态并执行useEffect。在handleReset中，你刚把resetting.current设为true，调用setValues后马上又将其设为false，等到组件重新渲染、useEffect执行时，resetting.current已经变回false，导致判断分支永远无法触发。

方法一：利用setTimeout延迟重置标记 #

将resetting.current = false放入setTimeout，确保useEffect执行时能捕获到true的标记，同时在useEffect内补充标记重置逻辑，避免异常情况导致标记一直为true：

export const Component: React.FC<Props> = ({}) => {
    const resetting = React.useRef(false);
    const [values, setValues] = React.useState(getDefaultValues());

    React.useEffect(() => {
        if (resetting.current) {
            resetting.current = false;
            return;
        }
        if (someCondition) {
            // 执行正常业务逻辑
        }
    }, [values]);


    const handleReset = () => {
        resetting.current = true;
        setValues(getDefaultValues());
        // 延迟重置标记，确保useEffect能捕获到true状态
        setTimeout(() => {
            resetting.current = false;
        }, 0);
    };
    
    return <></>;
};

方法二：使用状态变量跟踪重置状态 #

用React状态变量替代ref，利用状态更新机制控制useEffect的执行，这种方式更符合React的状态管理逻辑：

export const Component: React.FC<Props> = ({}) => {
    const [isResetting, setIsResetting] = React.useState(false);
    const [values, setValues] = React.useState(getDefaultValues());

    React.useEffect(() => {
        if (isResetting) {
            setIsResetting(false);
            return;
        }
        if (someCondition) {
            // 执行正常业务逻辑
        }
    }, [values, isResetting]);


    const handleReset = () => {
        setIsResetting(true);
        setValues(getDefaultValues());
    };
    
    return <></>;
};

注：这种方式会因isResetting状态变化多触发一次组件渲染，通常该开销可忽略。

方法三：通过值比较直接跳过重置触发 #

如果重置后的values是固定默认值，可直接在useEffect中判断当前值是否为默认值，以此跳过逻辑执行：

export const Component: React.FC<Props> = ({}) => {
    const [values, setValues] = React.useState(getDefaultValues());
    const defaultValuesRef = React.useRef(getDefaultValues());

    React.useEffect(() => {
        // 比较当前值与默认值，跳过重置场景
        if (JSON.stringify(values) === JSON.stringify(defaultValuesRef.current)) {
            return;
        }
        if (someCondition) {
            // 执行正常业务逻辑
        }
    }, [values]);


    const handleReset = () => {
        setValues(defaultValuesRef.current);
    };
    
    return <></>;
};

注：该方法仅适用于默认值可序列化比较的场景，复杂对象需自定义比较逻辑避免误判。

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