useEffect仅触发一次与确保useState值在useEffect中实时生效的平衡问题

问题分析 #

从你的代码和描述来看，核心问题出在三个关键点上：

1. 错误地将业务逻辑放在cleanup函数中：你最初把fetchApi()放在useEffect的cleanup（返回的函数）里，这完全误解了cleanup的作用——它是用来清理副作用（比如取消请求、清除定时器、移除事件监听），而不是执行业务逻辑的。
2. Strict Mode开发环境的双渲染机制：React Strict Mode在开发环境下会重复执行useEffect，用于检测不安全的副作用，但这导致你去掉cleanup后初始加载时fetch被调用两次。
3. 闭包导致cleanup中拿到旧state：当count更新时，旧的cleanup函数是上一次渲染周期的闭包，捕获的是旧的count值，所以fetch时会使用错误的ID。

为什么会出现这些现象？ #

1. Cleanup函数中的旧state问题

useEffect的cleanup函数是闭包，它捕获的是当前渲染周期的所有变量（包括state）。当你点击按钮更新count时，组件会重新渲染，创建新的useEffect回调和cleanup函数。旧的cleanup会在新的useEffect执行前被调用，而它内部的count还是上一次渲染的数值，因此拿到的永远是“旧值”。

2. Strict Mode的双渲染

这是React开发环境的调试机制，目的是帮助你发现未正确清理的副作用（比如重复订阅、未取消的请求）。生产环境下不会有这个问题，但你不想关闭Strict Mode的选择是对的——它能帮你提前发现潜在bug。

解决方案 #

我们需要：

• 将业务逻辑移到useEffect的主回调中，而非cleanup
• 使用useRef避免Strict Mode初始双渲染导致的重复fetch
• 确保count更新时能拿到最新的state值
• 可选：添加请求取消逻辑，避免竞态条件

最终代码示例

import { useState, useEffect, useRef } from 'react';
// 假设axiosGet是你封装的axios请求方法
const axiosGet = async (url, options) => {
  const response = await fetch(url, options);
  return response.json();
};

export const MyComponent = () => {
  const [count, setCount] = useState(0);
  // 标记初始fetch是否已执行，避免Strict Mode双渲染重复请求
  const hasFetchedInitial = useRef(false);

  useEffect(() => {
    // 创建AbortController用于取消未完成的请求（可选，避免竞态条件）
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchApi = async () => {
      try {
        console.log("当前count值:", count);
        const response = await axiosGet(
          `https://jsonplaceholder.typicode.com/todos/${count}`,
          { signal } // 传递signal给请求，用于取消
        );
        console.log("请求结果:", response);
        // 这里处理你的业务逻辑，比如更新state
      } catch (error) {
        // 忽略取消请求的错误
        if (error.name !== 'AbortError') {
          console.error("请求失败:", error);
        }
      }
    };

    // 处理初始加载：即使Strict Mode双渲染，只执行一次fetch
    if (count === 0) {
      if (!hasFetchedInitial.current) {
        fetchApi();
        hasFetchedInitial.current = true;
      }
    } else {
      // count更新时，每次都执行最新的fetch
      fetchApi();
    }

    // Cleanup函数：取消未完成的请求，重置初始标记（如果count变回0）
    return () => {
      controller.abort();
      if (count === 0) {
        hasFetchedInitial.current = false;
      }
    };
  }, [count]); // 依赖count，确保每次count更新都能拿到最新值

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

关键细节解释 #

1. 正确使用useEffect主回调：
   fetch逻辑被放在useEffect的主函数中，而非cleanup里。每次count更新时，useEffect会创建新的闭包，捕获最新的count值，因此请求时能使用正确的ID。

2. useRef避免初始双渲染重复请求：
   hasFetchedInitial这个ref标记初始fetch是否已经执行，即使Strict Mode重复调用useEffect，也只会在第一次执行fetch，后续的重复调用会被跳过。

3. AbortController处理竞态条件：
   当count快速更新时，上一次的请求可能还未完成，这时候新的请求会触发旧请求的取消，避免旧请求的结果覆盖新请求的结果，这是处理异步请求的最佳实践。

总结 #

• 永远不要在cleanup中执行业务逻辑：它的唯一作用是清理副作用。
• useRef是处理Strict Mode双渲染的常用工具：通过标记状态，我们可以在开发环境下保持Strict Mode的同时，避免不必要的重复请求。
• 依赖state时，useEffect会自动捕获最新值：只要你在useEffect的依赖数组中正确声明了count，每次count更新都会创建新的闭包，确保拿到最新的state值。

内容来源于stack exchange