如何让React的useEffect仅运行一次？MERN栈账户激活页面问题

问题场景 #

开发MERN栈应用时，用户通过邮箱激活链接进入ActivationPage组件，组件从URL提取token后，在useEffect内发起POST请求到服务器完成用户创建。但出现异常：组件首次加载显示“Your account has been activated successfully!”，几秒后却变为“Your token has expired!”——原因是useEffect重复执行，导致重复发送激活请求，token被消耗后再次请求触发错误进入catch块。

问题根源 #

1. 原代码useEffect依赖项为空数组，未将activationToken纳入依赖，不符合React hooks依赖规则，可能引发组件重渲染时useEffect意外触发；
2. 开发环境下React严格模式会自动执行两次useEffect（用于检测副作用问题），直接触发重复请求；
3. 缺乏请求执行状态标记，无法阻止重复发起激活请求。

解决方案 #

添加状态标记请求是否已执行，同时完善useEffect依赖项，确保请求仅执行一次：

import React, { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import axios from 'axios';

import { serverUrl } from '../serverUrl';

const ActivationPage = () => {
  const [error, setError] = useState(false);
  // 新增状态：标记激活请求是否已处理
  const [hasProcessed, setHasProcessed] = useState(false);

  const [searchParams] = useSearchParams();
  const activationToken = searchParams.get('token');

  useEffect(() => {
    const activationEmail = async () => {
      // 仅在token存在且未处理过请求时执行
      if (activationToken && !hasProcessed) {
        try {
          const response = await axios.post(`${serverUrl}/user/activation`, { activationToken });
          console.log(response);
        } catch (error) {
          setError(true);
          console.log(`ERROR: ${error.message}`);
        } finally {
          // 无论请求成功/失败，标记为已处理，避免重复执行
          setHasProcessed(true);
        }
      }
    };

    activationEmail();
  }, [activationToken, hasProcessed]); // 添加正确的依赖项

  return (
    <div className='w-full h-screen flex justify-center items-center'>
      {error ? <p>Your token has expired!</p> : <p>Your account has been activated successfully!</p>}
    </div>
  );
};

export default ActivationPage;

关键说明 #

• hasProcessed状态：确保激活请求无论成功或失败，都只会执行一次，彻底杜绝重复请求；
• 完善依赖项：将activationToken和hasProcessed加入useEffect依赖数组，符合React hooks规则，避免闭包问题和意外触发；
• finally块：保证无论请求结果如何，都会标记请求已处理，确保状态更新的完整性。

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