React组件中useEffect清理钩子的使用及卸载状态更新警告修复

问题场景 #

在React项目的Hit组件中切换页面时，出现以下警告并导致网站崩溃：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

当前使用的Hit组件代码如下：

const Hit = ({hit}) => {
    useEffect(() => {
        getSocialNetorks(hit);
        return () => {
            console.log('unmounting...');
        };
    },[hit]);

    function getSocialNetorks(hit){
        const socialNetworkImage = hit.SocialNetwork.map((social,index) =>{
            return <img className='small-logo' src={require('../../assets/socialNetworks/' + social + '.png')} key={index}></img>;
        })
        return socialNetworkImage
    }

    return (
        <div className="hit-card">
            <a target="_blank" rel="noreferrer" href={`${hit.Website}`}>
                <div style={{ backgroundImage: `url(${hit.Image})` }} className="card-image"></div>
                <h4 className="hit-name">
                    <Highlight attribute="Name" hit={hit} />
                </h4>
                <b>Used for :</b><br/>
                <span>{getSocialNetorks(hit)}</span><br/>
                <b>Works on:</b><br/>
                <p className='hit-card--details'> {hit.Deployment}</p>
            </a>
        </div>
    );
}

问题分析与解决方案 #

1. 移除无用的useEffect
   当前的useEffect完全多余：你在effect中调用了getSocialNetorks，但并没有使用它的返回值，组件渲染时已经直接调用了该函数。这个effect不仅没有实际作用，还可能引发不必要的逻辑执行。

2. 添加组件挂载状态跟踪
   警告的核心原因是组件卸载后，仍有异步任务（比如依赖组件的异步更新、图片加载回调）尝试更新组件状态。通过useRef跟踪组件挂载状态，在异步操作执行前检查组件是否仍处于挂载状态，就能避免此类问题。

修改后的组件代码：

const Hit = ({hit}) => {
    // 用ref跟踪组件是否挂载
    const isMounted = useRef(true);

    useEffect(() => {
        // 组件卸载时将标志位设为false
        return () => {
            isMounted.current = false;
        };
    }, []);

    function getSocialNetorks(hit){
        const socialNetworkImage = hit.SocialNetwork.map((social,index) =>{
            return <img className='small-logo' src={require('../../assets/socialNetworks/' + social + '.png')} key={index}></img>;
        })
        return socialNetworkImage
    }

    // 若依赖的Highlight组件或图片加载有异步状态更新，需在更新前检查isMounted.current
    // 例如：如果有异步请求，需在then/catch中判断if(isMounted.current)再执行状态更新

    return (
        <div className="hit-card">
            <a target="_blank" rel="noreferrer" href={`${hit.Website}`}>
                <div style={{ backgroundImage: `url(${hit.Image})` }} className="card-image"></div>
                <h4 className="hit-name">
                    <Highlight attribute="Name" hit={hit} />
                </h4>
                <b>Used for :</b><br/>
                <span>{getSocialNetorks(hit)}</span><br/>
                <b>Works on:</b><br/>
                <p className='hit-card--details'> {hit.Deployment}</p>
            </a>
        </div>
    );
}

补充说明 #

如果后续给组件添加了异步逻辑（比如图片加载错误状态、网络请求），一定要在执行状态更新前先检查isMounted.current是否为true，确保只有组件挂载时才执行状态更新操作。

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