页面加载时异步函数引发useEffect未触发状态变更问题

核心问题 #

页面挂载时，第一个useEffect设置了state.itemIdToBeHandled，但依赖该状态的第二个useEffect并未触发第二次执行——仅在调换两个useEffect顺序，或注释掉第二个useEffect内的异步调用void getOrPostOnWishlist()时，才能正常触发。

大概率原因 #

1. 异步函数内的状态覆盖：getOrPostOnWishlist中的checkForPresentWishlist或addItemToNewWishlist可能在执行时，修改了itemIdToBeHandled状态并将其重置为undefined。
   • 初始渲染时，第二个useEffect先按声明顺序执行，调用异步函数进入等待；此时第一个useEffect设置itemIdToBeHandled，组件本应重新渲染，但异步函数完成后触发的状态更新，将itemIdToBeHandled改回undefined，导致最终状态无变化，第二个useEffect自然不会再次执行。
2. 闭包陷阱：getOrPostOnWishlist捕获的是组件初始渲染时的state，即使第一个useEffect更新了状态，异步函数内仍使用旧的state值，可能引发逻辑冲突，间接导致状态更新被抵消。

解决方案 #

方案1：确保异步函数使用最新状态（解决闭包问题）

修改getOrPostOnWishlist，将需要的状态作为参数传入，避免依赖闭包捕获的旧值：

// 接收当前状态作为参数
const getOrPostOnWishlist = async (itemId: number | undefined, wishlist: any) => {
  if (itemId) {
    await addItemToNewWishlist(itemId);
  } else if (!wishlist) {
    await checkForPresentWishlist();
  }
};

// 第二个useEffect中传入最新状态
React.useEffect(() => {
  console.log("condition:", state.itemIdToBeHandled);
  void getOrPostOnWishlist(state.itemIdToBeHandled, state.wishlist);
}, [state.itemIdToBeHandled]);

方案2：检查异步函数是否意外修改状态

排查addItemToNewWishlist和checkForPresentWishlist的内部逻辑，确认它们是否在更新wishlist的同时，误将itemIdToBeHandled重置为undefined。如果有这类逻辑，要么移除不必要的重置，要么在重置前增加判断（比如仅在完成处理后才清空itemIdToBeHandled）。

方案3：调整useEffect执行顺序（快速临时修复）

将第二个useEffect移到第一个useEffect之前：

// 先声明依赖状态的useEffect
React.useEffect(() => {
  console.log("condition:", state.itemIdToBeHandled);
  void getOrPostOnWishlist();
}, [state.itemIdToBeHandled]);

// 再声明设置状态的useEffect
React.useEffect(() => {
  const urlItemId = UrlSearchParamsHelper.wishlistItemId;
  if (urlItemId) {
    console.log("found item id in url:", urlItemId);
    setItemIdToBeHandled(urlItemId);
  }
}, []);

原理是：先执行第二个useEffect（初始状态），再执行第一个useEffect设置状态，此时组件重新渲染，第二个useEffect会基于最新状态再次执行，而异步函数的执行不会干扰这次状态更新的触发。

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