时间戳

首页 > 解决方案 > React 应用程序使用自定义 useRequest 钩子不断重新渲染

javascript - React 应用程序使用自定义 useRequest 钩子不断重新渲染

问题描述

在我的应用程序中，我创建了一个自定义挂钩来发出 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());

whereapi.user.getAll()是一个返回承诺的函数。该组件渲染并显示数据，但它会多次重新渲染和重新获取数据。导致这种情况的问题可能是什么？是否有多个正在创建的 Promise 实例触发钩子再次运行？

标签： javascriptreactjsreact-hooks

解决方案

whereapi.user.getAll()是一个返回承诺的函数。[...] 是否有多个正在创建的 Promise 实例触发钩子再次运行？

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

这些天来，我对此类请求的首选锤子是swr；也许调查一下？

推荐阅读