Question

在我的应用程序中，我创建了一个自定义挂钩来发出API请求：

const useRequest = (promise) => {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState({});
  useEffect(() => {
    let ignore = false;
    const fetchProduct = async () => {
      try {
        setLoading(true);
        const response = await promise;
        if (!ignore) setData(response);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchProduct();
    return () => {
      ignore = true;
    };
  }, [promise]);
  return { data, loading, error };
};
export default useRequest;

在我的组件中，我将其用作：

const { data, loading, error } = useRequest(api.user.getAll());

其中api.user.getAll()是一个返回承诺的函数。该组件将进行渲染并显示数据，但是它会多次重复渲染和重新提取数据。造成此问题的原因可能是什么？是否创建了多个承诺实例，这些实例会触发挂钩再次运行？

Answer 1

其中api.user.getAll()是一个返回承诺的函数。 [...]是否创建了多个承诺实例，这些实例会触发挂钩再次运行？

是的，每次渲染组件时，它都会调用api.user.getAll()。由于new Promise（或async函数）将始终返回一个新的Promise对象（钩子使用严格的相等性进行比较），因此将重新运行该效果。

这些天来，我对于此类请求的态度是swr；也许看看？

React应用通过自定义useRequest钩子不断重新渲染

1 个答案: