React账户激活组件useEffect清理函数为何立即执行？

问题描述 #

我正在实现一个账户激活页面的React组件，打算用React Effect在组件卸载时取消API请求。但实际情况是，进入页面后Effect的清理函数立即被调用，请求直接被取消。最初组件返回部分用了三个if分支，以为是根元素变化导致组件卸载，改成布尔表达式渲染后问题仍存在。

组件代码如下：

import { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next';
import { ServiceContainer } from '../../../services/ServiceContainer';
import { Card, Col, Container, Row, Spinner } from 'react-bootstrap';
import { Link, useSearchParams } from 'react-router-dom';

function ActivateAccount(props: { serviceContainer: ServiceContainer }) {
    const { t } = useTranslation();
    const [isProgress, setIsProgress] = useState(false);
    const [isSuccess, setIsSuccess] = useState(false);

    const [searchParams, _setSearchParams] = useSearchParams();
    const email = searchParams.get("email");
    const token = searchParams.get("token");

    const abortController: AbortController = new AbortController();

    if (email == undefined || token == undefined) {
        setIsProgress(false);
        setIsSuccess(false);
    }

    function onActivationSuccess(_data: object) {
        setIsSuccess(true);
        setIsProgress(false);
    }

    function onActivationFailure(_status: number, _data: object) {
        setIsSuccess(false);
        setIsProgress(false);
    }

    useEffect(() => {
        if (email !== undefined || token !== undefined) {
            props.serviceContainer.ApiClient.ActivateAccount(email!, token!, abortController, onActivationSuccess, onActivationFailure);
        }

        return (() => {
            // Cancel API queries if unmounting
            abortController.abort();
        });
    });

    return (
        <>
            { 
                (isProgress === true &&
                    <Container>
                        // snip - show progress
                    </Container>) ||
                (isSuccess === true &&
                    <Container>
                        // snip - show success
                    </Container>) ||
                (isSuccess === false &&
                    <Container>
                        // snip - show failure
                    </Container>)
            }
        </>
    );            
}

export { ActivateAccount }

原因分析 #

1. useEffect缺少依赖数组：未指定依赖数组的useEffect会在每次组件渲染时重新执行，执行新Effect前会先调用上一次Effect的清理函数。组件初始化渲染后，顶层的setState调用会触发二次渲染，此时第一次Effect的清理函数就会被立即执行，直接取消请求。
2. 顶层直接调用setState：组件渲染阶段（顶层代码）直接调用setIsProgress和setIsSuccess会触发额外重渲染，进一步加剧Effect的重复执行和清理逻辑的触发。
3. AbortController实例在顶层声明：每次组件渲染都会创建新的AbortController实例，旧实例的清理函数被调用时，会取消刚发起的请求。

解决方案 #

1. 给useEffect添加空依赖数组，限制仅挂载时执行 #

空依赖数组[]能让Effect仅在组件挂载时运行一次，清理函数只会在组件卸载时执行。

2. 将AbortController移到useEffect内部 #

确保每个Effect实例对应唯一的控制器，避免新旧实例混淆导致误取消请求。

3. 移除顶层的setState调用，改用useEffect处理参数缺失逻辑 #

组件渲染阶段不能直接调用setState，把参数校验逻辑放到单独的useEffect里。

4. 修正请求触发的条件判断 #

原代码中email !== undefined || token !== undefined逻辑错误，应该用&&，只有两个参数都存在时才发起请求。

修改后的完整代码 #

import { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next';
import { ServiceContainer } from '../../../services/ServiceContainer';
import { Card, Col, Container, Row, Spinner } from 'react-bootstrap';
import { Link, useSearchParams } from 'react-router-dom';

function ActivateAccount(props: { serviceContainer: ServiceContainer }) {
    const { t } = useTranslation();
    const [isProgress, setIsProgress] = useState(false);
    const [isSuccess, setIsSuccess] = useState(false);

    const [searchParams, _setSearchParams] = useSearchParams();
    const email = searchParams.get("email");
    const token = searchParams.get("token");

    function onActivationSuccess(_data: object) {
        setIsSuccess(true);
        setIsProgress(false);
    }

    function onActivationFailure(_status: number, _data: object) {
        setIsSuccess(false);
        setIsProgress(false);
    }

    // 处理参数缺失的情况
    useEffect(() => {
        if (!email || !token) {
            setIsProgress(false);
            setIsSuccess(false);
        }
    }, [email, token]);

    // 发起激活请求，仅在挂载时执行
    useEffect(() => {
        // 仅当两个参数都存在时才发起请求
        if (!email || !token) return;

        const abortController = new AbortController();
        setIsProgress(true);

        props.serviceContainer.ApiClient.ActivateAccount(
            email, 
            token, 
            abortController, 
            onActivationSuccess, 
            onActivationFailure
        );

        return () => {
            abortController.abort();
        };
    }, [email, token, props.serviceContainer.ApiClient, onActivationSuccess, onActivationFailure]);

    return (
        <>
            {isProgress ? (
                <Container>
                    // snip - show progress
                </Container>
            ) : isSuccess ? (
                <Container>
                    // snip - show success
                </Container>
            ) : (
                <Container>
                    // snip - show failure
                </Container>
            )}
        </>
    );            
}

export { ActivateAccount }

额外优化点 #

• 渲染部分改用三元表达式，比逻辑或更清晰，避免潜在的布尔值渲染问题。
• 在发起请求前设置isProgress为true，确保加载状态正确显示。
• 给useEffect添加完整的依赖数组（包括onActivationSuccess、onActivationFailure等），避免闭包陷阱。如果担心函数引用变化导致重复执行，可以用useCallback包裹这两个回调函数。

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