在useEffect中更新状态后调用API，却使用旧状态的问题

问题原因 #

1. React状态更新的异步性：setTrades是异步操作，调用后不会立即更新trades状态，所以紧接着执行getListOfTrades时，函数内引用的trades还是更新前的旧值。
2. 无限循环陷阱：将trades作为useEffect的依赖，会导致每次setTrades更新状态后，触发useEffect重新执行，再次调用setTrades，陷入无限循环。

解决方案一：直接传递最新props值（推荐） #

既然trades状态是从outdata.filters同步而来，直接将该props值传入API调用函数，跳过状态更新的异步延迟，同时避免循环触发。

修改后的代码：

const Treades = () => {
  const [trades, setTrades] = useState([]);

  useEffect(() => {
    // 同步状态
    setTrades(outdata.filters);
    // 直接传入最新的过滤值调用API
    getListOfTrades(outdata.filters);
  }, [outdata.filters]); // 依赖改为props的filters，避免循环

  const getListOfTrades = async (currentTrades) => {
    const queryParams = {
      trades: currentTrades
    };

    try {
      const { data: { data = [], meta: { pagination = {} } = {} } = {} } =
        await getTradeList(queryParams);

      // 用函数式更新避免闭包导致的旧状态问题
      setTradeList(prevList => prevList.concat(data));
      setIsFilterPopup(false);
      setPagination(pagination);
    } catch ({ data: { error: { message = "" } = {} } = {} }) {
      JPFireMessages.fire("tostFrom:React", { type: "error", data: message });
    } finally {
      setIsLoading(false);
    }
  };
}

关键修改点：

• 调整useEffect依赖为outdata.filters，仅当props过滤条件变化时执行，消除无限循环。
• 调用getListOfTrades时直接传入outdata.filters，确保API使用最新值。
• 对setTradeList使用函数式更新，避免闭包导致获取旧的tradeList状态。

解决方案二：拆分useEffect，分离状态同步与API调用 #

如果业务逻辑必须依赖trades状态触发API调用，可拆分两个useEffect，分别负责状态同步和监听状态变化调用API。

修改后的代码：

const Treades = () => {
  const [trades, setTrades] = useState([]);

  // 同步props到状态
  useEffect(() => {
    setTrades(outdata.filters);
  }, [outdata.filters]);

  // 监听trades变化，触发API调用
  useEffect(() => {
    // 可选：过滤初始空数组的情况，避免不必要的API请求
    if (trades.length === 0) return;
    
    getListOfTrades();
  }, [trades]);

  const getListOfTrades = async () => {
    const queryParams = {
      trades: trades
    };

    try {
      const { data: { data = [], meta: { pagination = {} } = {} } = {} } =
        await getTradeList(queryParams);

      setTradeList(prevList => prevList.concat(data));
      setIsFilterPopup(false);
      setPagination(pagination);
    } catch ({ data: { error: { message = "" } = {} } = {} }) {
      JPFireMessages.fire("tostFrom:React", { type: "error", data: message });
    } finally {
      setIsLoading(false);
    }
  };
}

关键修改点：

• 拆分useEffect，职责分离：一个同步props到状态，一个监听状态变化执行API调用。
• 第二个useEffect依赖trades，确保状态更新完成后才触发API调用，此时拿到的是最新状态值。
• 可添加判断条件，避免初始状态下的无效API请求。

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