如何在useEffect中不使用setTimeout获取最新状态值？

不用setTimeout也能解决这个问题，核心思路是等搜索请求真正完成后，结合当前的searchTerms判断是否触发日志，同时保证同一个searchTerms只触发一次日志。

具体实现代码 #

替换你原来的hitsRef和useEffect部分，改成下面的代码：

// 保存当前正在处理的搜索关键词
const currentSearchRef = useRef<string>('');
// 标记当前搜索是否已经触发过日志
const hasLoggedRef = useRef<boolean>(false);

// 当搜索关键词变化且需要发起查询时，更新当前搜索词并重置日志标记
useEffect(() => {
  if (shouldRender) {
    currentSearchRef.current = searchTerms;
    hasLoggedRef.current = false;
  }
}, [searchTerms, shouldRender]);

// 监听数据加载状态，在合适的时机触发日志
useEffect(() => {
  // 条件：加载完成、有返回数据、当前搜索词和记录的一致、还没触发过日志
  if (!isLoading && !isFetching && data && currentSearchRef.current === searchTerms && !hasLoggedRef.current) {
    analyticsService?.logEvent(ANALYTICS_EVENTS.SEARCH_COMPLETED, {
      total_results: data.hits.total.value,
      error_message: null,
    });
    // 标记为已触发，避免重复调用
    hasLoggedRef.current = true;
  }
}, [data, isLoading, isFetching, searchTerms, analyticsService]);

方案说明 #

1. currentSearchRef：用来记录当前发起查询的searchTerms，避免分页切换（currentPage变化）时误触发日志——只有当searchTerms真正变化时，才会更新这个ref并重置日志标记。
2. hasLoggedRef：确保同一个searchTerms对应的搜索结果，只会触发一次日志，解决了把data加入依赖后重复触发的问题。
3. 加载状态判断：通过isLoading和isFetching确保请求已经完成，此时data是最新的结果，不用再靠setTimeout等待。

这样既不用依赖setTimeout的延迟，也能精准在searchTerms变化且搜索完成后触发一次日志。

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