0

使用Axios自定义钩子

export const useAxios = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    setLoading(true);
    setData(null);
    setError(null);
    const controller = new AbortController();
    const fetcher = async (controller) => {
      try {
        const response = await client.get(url, {
          signal: controller.signal
        });
        if (response.status === 200) {
          setData(response.data);
          setLoading(false);
        }
      } catch (error) {
        setLoading(false);
        if (error.message === "canceled") {
          setError({ errorstatus: false });
        } else {
          setError({ errorstatus: true, error });
        }
      }
    };
    fetcher(controller);
    return () => {
      controller.abort();
    };
  }, [url]);
  return { data, loading, error };
};

客户端api.js

import axios from "axios";
export const client = axios.create({
  baseURL: "https://servtrial--bleedblue.repl.co",
  headers: { "X-Custom-Header": "foobar" }
});

所以问题是我有一个按钮显示组件 Showdata 切换一旦我关闭切换请求被取消但它仍然显示 useefffect 警告

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。

我已经阅读了axios和reactjs的文档，但我无法解决这个问题。 这是codesandbox的链接 请告诉我我的代码有什么问题以及如何解决这个问题。

4

0 回答 0