启用StrictMode时，如何处理useEffect中的非幂等变更？

React StrictMode在开发环境会重复执行副作用（包括useEffect），目的是帮你检测潜在代码问题，但对于非幂等的POST请求，这种重复执行会导致数据重复创建/修改，必须处理。下面是几种可行方案，其中你考虑的ref标记法是通用且高效的最优解：

1. 使用Ref标记请求执行状态 #

这是最直接且通用的方案，利用useRef在组件整个生命周期内保存状态，不会因重渲染重置。

import { useEffect, useRef } from 'react';
import { useSearchParams } from 'react-router-dom';

function TargetComponent() {
  const [searchParams] = useSearchParams();
  const isRequestCompleted = useRef(false);
  // 用AbortController处理请求取消，避免组件卸载时内存泄漏
  const abortController = useRef(new AbortController());

  useEffect(() => {
    const targetParam = searchParams.get('targetParam');
    
    // 仅当参数存在且未发送过请求时执行
    if (targetParam && !isRequestCompleted.current) {
      fetch('/api/non-idempotent-action', {
        method: 'POST',
        body: JSON.stringify({ param: targetParam }),
        headers: { 'Content-Type': 'application/json' },
        signal: abortController.current.signal
      })
        .then(res => {
          if (!res.ok) throw new Error('请求失败');
          return res.json();
        })
        .then(data => {
          // 处理业务逻辑
          console.log('请求成功:', data);
          isRequestCompleted.current = true;
        })
        .catch(err => {
          if (err.name !== 'AbortError') {
            console.error('请求出错:', err);
            // 若需要重试，可在此重置标记
            // isRequestCompleted.current = false;
          }
        });
    }

    // 组件卸载时取消未完成的请求
    return () => {
      abortController.current.abort();
    };
  }, [searchParams]);

  return <div>处理中...</div>;
}

注意点： #

• 若请求失败需要重试，可在catch块重置isRequestCompleted.current为false；
• 搭配AbortController可以在组件卸载时取消未完成的请求，避免内存泄漏；
• 该方案仅在开发环境阻止重复请求，生产环境StrictMode不会触发重复执行，不影响正常逻辑。

2. 将请求逻辑移至路由导航触发阶段 #

如果你的组件是通过路由跳转进入的，可以把请求逻辑从组件副作用中剥离，放到导航触发的时机（比如点击跳转按钮时），彻底避开StrictMode的影响。

import { useNavigate } from 'react-router-dom';

function SourceComponent() {
  const navigate = useNavigate();

  const handleJumpAndAction = () => {
    const paramValue = 'user-123';
    // 先执行POST请求，再根据结果跳转
    fetch('/api/non-idempotent-action', {
      method: 'POST',
      body: JSON.stringify({ param: paramValue }),
      headers: { 'Content-Type': 'application/json' }
    })
      .then(res => res.json())
      .then(() => {
        navigate(`/target?targetParam=${paramValue}`);
      })
      .catch(err => console.error('请求失败:', err));
  };

  return (
    <button onClick={handleJumpAndAction}>
      执行操作并跳转
    </button>
  );
}

这种方案适合能控制导航触发时机的场景，完全避免了组件副作用重复执行的问题，但不适用于直接访问目标URL的情况（比如用户手动输入链接）。

最优方案选择 #

如果你的场景需要支持直接访问目标URL（依赖URL查询参数触发请求），使用Ref标记请求状态的方案是最优解——它通用、无侵入，且能完美适配StrictMode的开发环境特性。如果能控制导航触发时机，第二种方案更彻底，但适用范围较窄。

内容的提问来源于stack exchange，提问作者king.reflex