DOMException：信号在异步调用的 useEffect 中无故中止

Question

我有一个在严格模式下使用 React 和 GraphQL 的项目。

我更新了一些软件包，现在在包含异步调用的 useEffect 中收到以下错误。

  useEffect(() => {
    const loadTags = async () => {
      const { data } = await fetchTags();
      setTags([...(data?.tags || [])]);
    };

    loadTags();
  }, [current, fetchTags]);

DOMException：信号在异步调用的 useEffect 中无故中止。

我不太确定是什么原因造成的，我相信使用效果会重新运行并自行清除，并且它不会正确中止查询。

以前没有发生过这种情况，或者至少没有产生错误。

我想知道我的实现是否不正确，或者我更新的某些包是否出现问题，我在 github 上找不到我更新的包上的任何相关线程

Answer 1

在使用

@apollo/client

时，将

3.7.1

库从版本

3.7.8

升级到

useLazyQuery

后，我也遇到了同样的问题（可能与

useQuery

相同）。

该错误是在版本

3.7.4

中引入的。

在 Apollo 提供修复之前，解决方案是 降级到版本 <=

3.7.3

。

这是堆栈跟踪（供参考）：

useLazyQuery.ts:78 Uncaught (in promise) DOMException: signal is aborted without reason
    at http://localhost:3000/node_modules/.vite/deps/@apollo_client.js?v=d5c2e0d9:8702:20
    at Set.forEach (<anonymous>)
    at http://localhost:3000/node_modules/.vite/deps/@apollo_client.js?v=d5c2e0d9:8701:35
    at safelyCallDestroy (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:16737:13)
    at commitHookEffectListUnmount (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:16864:19)
    at invokePassiveEffectUnmountInDEV (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:18359:19)
    at invokeEffectsInDev (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19697:19)
    at commitDoubleInvokeEffectsInDEV (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19678:15)
    at flushPassiveEffectsImpl (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19499:13)
    at flushPassiveEffects (http://localhost:3000/node_modules/.vite/deps/chunk-JZ3YVIXN.js?v=8247418e:19443:22)

Answer 2

就我而言，这是一个Next JS项目，我将next.config.js文件的reactStrictMode设置为false，并且在3.7.10版本中正常运行

 /** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  compiler: {
    styledComponents: true
  },
  eslint: {
    ignoreDuringBuilds: true
  }
}

module.exports = nextConfig

Answer 3

import { useEffect, useState } from "react";

const useAxios = (url) => {
  const [data, setData] = useState([]);
  const [error, setError] = useState("");

  useEffect(() => {
    let isMounted = true;
    const controller = new AbortController();
    const signal = controller.signal;
    try {
      const fetchData = async () => {
        const res = await fetch(url, {
          method: "GET",
          signal,
        });
        return res.json();
      };

      fetchData()
        .then((data) => {
          isMounted && setData(data);
        })
        .catch((error) => {
          if (error instanceof DOMException && error.name === "AbortError") {
            console.log(error.message);
          } else {
            setError(error.message);
          }
        });
    } catch (error) {
      setError("Inter error occured!");
    }

    return () => {
      isMounted = false;
      controller.abort();
    };
  }, []);

  return [data, error];
};

export default useAxios;