如何在仅监听searchTerms的useEffect中获取data的最新值

你遇到的核心问题是：searchTerms变化时，异步查询的data还未更新，导致useEffect拿到旧数据；同时不能把data加入依赖，因为要保证只要searchTerms变化就触发日志，无论结果总数是否改变。

下面提供两种可行方案：

方案1：用Ref保存当前搜索词，监听查询完成状态 #

通过useRef存储当前的searchTerms，避免闭包导致的旧值问题，同时监听查询的加载状态，确保只有当当前搜索词对应的查询完成后，才调用日志接口：

const SearchResults: FunctionComponent<SearchResultsProps> = ({
  refinement,
  searchTerms,
  currentPage,
}) => {
  const { formatMessage } = useIntl();
  const { analyticsService } = useContainerProps();
  const shouldRender = searchTerms.length > 0;
  // 用Ref保存当前的搜索词，避免闭包问题
  const currentSearchTermRef = useRef(searchTerms);
  const { data, isFetching, isLoading } = usePagedQuery({
    refinement,
    terms: searchTerms,
    count: recordsPerPage,
    offset: (currentPage - 1) * recordsPerPage,
    queryEnabled: shouldRender,
  });

  // 更新Ref中的搜索词
  useEffect(() => {
    currentSearchTermRef.current = searchTerms;
  }, [searchTerms]);

  // 当查询完成（加载状态结束）且当前搜索词有效时，触发日志
  useEffect(() => {
    if (!isLoading && !isFetching && currentSearchTermRef.current) {
      analyticsService?.logEvent(ANALYTICS_EVENTS.SEARCH_COMPLETED, {
        total_results: data?.hits.total.value,
        error_message: null,
      });
    }
  }, [data, isLoading, isFetching, analyticsService]);
...

方案2：利用查询钩子的成功回调（推荐） #

如果你的usePagedQuery支持onSuccess回调（多数React查询类钩子都提供这个能力），直接在查询成功时触发日志，这样能直接拿到最新的查询结果，且每次searchTerms变化触发的查询都会执行该回调：

const SearchResults: FunctionComponent<SearchResultsProps> = ({
  refinement,
  searchTerms,
  currentPage,
}) => {
  const { formatMessage } = useIntl();
  const { analyticsService } = useContainerProps();
  const shouldRender = searchTerms.length > 0;

  const { data, isFetching, isLoading } = usePagedQuery({
    refinement,
    terms: searchTerms,
    count: recordsPerPage,
    offset: (currentPage - 1) * recordsPerPage,
    queryEnabled: shouldRender,
    // 查询成功时直接触发日志
    onSuccess: (fetchedData) => {
      if (searchTerms) {
        analyticsService?.logEvent(ANALYTICS_EVENTS.SEARCH_COMPLETED, {
          total_results: fetchedData?.hits.total.value,
          error_message: null,
        });
      }
    },
  });
...

这两种方案都能保证：只要searchTerms变化，就会用最新的查询结果触发日志，不会因为结果总数不变而跳过日志调用。

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