基于用例的useFetch hook导致无限循环

Question

我试图根据不同的用例创建一个 useFetch 挂钩，但我无法处理这个任务。

首先，我有一个服务，一个存储库，然后调用一个用例：

const userService = new UserServiceImpl(apiConfig);
const uploadImageService = new AmplifyS3Service();
const userRepository = new UserRepositoryImpl(
   userService,
   uploadImageService
);
const getUserUseCase = new GetUserUseCaseImpl(userRepository);

我想优化每个任务，从 getUserUseCase 获取数据，因为 returns 一个 Promise，放入状态和映射槽数据。我的整个应用程序都是基于用例

const [user, setUser] = useState<User>();
getUserUseCase.getUser().then(setUser)

我尝试创建一个 useFetch 挂钩：

import { useEffect, useState } from "react";

export const useFetch = (useCase: Promise<any>) => {
  const [state, setState] = useState({
    data: null,
    loading: true,
    error: null,
  });

  useEffect(() => {
    useCase.then((data) => {
      setState({
        data,
        loading: false,
        error: null,
      });
    });
  }, [useCase]);

  return state;
};

然后我称之为通过参数传递用例...

const userInfo = getUserUseCase.getUser();
const { data, loading } = useFetch(userInfo);

在这一点之后，我得到了一个无限循环，我不知道我做错了哪一部分。
任何帮助将不胜感激。
谢谢！

Answer 1

我猜测每次运行都会返回一个新的 promise 对象：

const userInfo = getUserUseCase.getUser();

然后将其传递给 useFetch:

const { data, loading } = useFetch(userInfo);

然后用作效果依赖项：

  useEffect(() => {
    useCase.then((data) => {
      setState({
        data,
        loading: false,
        error: null,
      });
    });
  }, [useCase]);

这意味着每个渲染都会触发该效果，因为在每个渲染上效果依赖性都已更改。

那么我猜，您不希望在每次渲染时都运行：

const userInfo = getUserUseCase.getUser();

这意味着您应该记住它，以便每次渲染时它始终具有相同的值，并且只有运行一次。

const userInfo = useMemo(() => getUserUseCase.getUser());

现在 userInfo 具有 稳定的身份 并且可以安全地用作效果依赖项。

基于用例的useFetch hook导致无限循环

useFetch hook based on use cases causes infinite loop

typescript

reactjs

react-hooks