测试渲染React组件时useState触发无限循环问题求助

问题场景 #

测试环境下渲染Detail组件时，MyList子组件中调用updateSelectData(filteredStatus)触发无限循环，浏览器环境无此问题。循环触发点在MyList的useEffect钩子内，依赖someData、status、updateSelectData。

核心原因 #

测试环境中react-query的查询结果（someByStatus）可能每次都返回新的对象/数组引用，导致MyList的someData prop频繁变化，触发useEffect执行；而每次调用updateSelectData会导致父组件Detail重新渲染，进而触发react-query重新查询，形成闭环。

解决方法 #

1. 避免重复更新状态（最直接有效） #

在MyList组件中，通过useRef记录上一次的filteredStatus值，只有当新生成的filteredStatus与上一次不同时，才调用updateSelectData：

import { useEffect, useRef } from 'react';

export const MyList: React.FC<MyListProps> = ({
  status,
  updateSelectData,
  someData,
}) => {
  const prevFilteredStatusRef = useRef<SomeEnum[]>([]);

  useEffect(() => {
    if (!status && someData) {
      let filteredStatus: SomeEnum[] = [];
      
      // 你的过滤逻辑代码...

      // 比较新旧值是否一致（根据实际数据结构选择合适的比较方式）
      const valuesEqual = JSON.stringify(filteredStatus) === JSON.stringify(prevFilteredStatusRef.current);
      if (!valuesEqual) {
        updateSelectData(filteredStatus);
        prevFilteredStatusRef.current = filteredStatus;
      }
    }
  }, [someData, status, updateSelectData]);

  // 组件其余代码...
};

2. 优化react-query查询结果稳定性 #

在Detail组件中，给useQuery添加select配置或用useMemo缓存查询结果，确保只有数据真正变化时才生成新引用：

// 方式1：通过useQuery的select选项处理
const { data: someByStatus } = useQuery(
  ['someList', id, status],
  async () => {
    return status
      ? await someApi.getSome({ id: id as string, status })
      : await someApi.getSome({ id: id as string });
  },
  {
    select: (data) => {
      // 如果是数组，可通过浅拷贝+比较避免不必要的新引用
      const cachedData = queryClient.getQueryData(['someList', id, status]);
      if (JSON.stringify(data) === JSON.stringify(cachedData)) {
        return cachedData;
      }
      return [...data];
    },
  }
);

// 方式2：用useMemo缓存查询结果
const memoizedSomeByStatus = useMemo(() => someByStatus, [someByStatus]);

// 渲染时传递memoizedSomeByStatus给MyList
<MyList
  status={status}
  updateSelectData={setSelectData}
  someData={memoizedSomeByStatus}
/>

3. 调整测试环境react-query配置 #

在测试中配置react-query的缓存策略，避免重复请求导致数据频繁更新：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity, // 设置数据永不过期，避免重复查询
      retry: false, // 禁用重试
    },
  },
});

// 在测试渲染时包裹QueryClientProvider
renderWithProviders(
  <QueryClientProvider client={queryClient}>
    <HistoryRouter history={memoryHistory}>
      <Detail />
    </HistoryRouter>
  </QueryClientProvider>
);

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