Jest 中的 API 模拟后 useEffect 中的无限循环

Question

在我目前正在处理的组件中看到一些奇怪的东西。 因此，我有一个服务器端分页表，在每次 API 调用中，我都将新记录推送到现有数组。 我正在使用fetchBaseQuery进行 API 调用。

实现它的代码

let response = useGetQuery(request); // This hook will perform the API call
const records =
    response.data?.records;
  React.useEffect(() => {
    if (records) {
      setTableRecords((prevState: any) => [
        ...prevState,
        ...records,
      ]);
    }
  }, [records]);

测试用例

jest.mock("../endpoints", () => ({
  ...jest.requireActual("../endpoints"),
  useGetQuery: () => ({
    isSuccess: true,
    data: {
      message: "Success",
      records: [], // It gets into infinte loop if I provide this key while mocking
    },
  }),
}));

test("should mount", () => {
    const component = renderer.create(<SomeComponent/>);
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
});

根据我的理解，如果我们在useEffect挂钩中使用数组作为依赖项，则可能会导致无限循环，因为 React 使用浅比较来检查依赖项的引用是否已更改。 为了解决这个问题，我尝试使用useRef挂钩，但根据我的用例，这不起作用，因为 useRef 在其内容更改时不会通知您。

然后我尝试将response.data对象作为 useEffect 钩子的依赖项，但根据浅层比较，它也会导致无限循环，所以我试图用useMemo钩子修复它，但好像没有运气我将依赖项作为再次导致相同问题的对象传递，并且不传递依赖项对我不起作用。

有没有其他方法可以更好地处理这种情况？

Answer 1

如果数组不是太大，则对您在依赖数组中传递的数组进行字符串化。

let response = useGetQuery(request); // This hook will perform the API call
const records =
    response.data?.records;
  React.useEffect(() => {
    if (records) {
      setTableRecords((prevState: any) => [
        ...prevState,
        ...records,
      ]);
    }
  }, [JSON.stringify(records)]);

Answer 2

我使用 useEffect 钩子，但不是将 api 响应作为数组传递，而是使用一些参数，例如，如果我调用 api 来获取基于类别的图像，我只会在类别更改时调用 api：

   const [state, setState] = useState({
      loading: true,
      data: [],
   });

   useEffect(() => {
       myApiMethod(category).then((gifs) => {
          setState({
             loading: false,
             data: gifs,
          });
       });
   }, [category]);