反应错误：“错误‘AbortController’未定义”

Question

我用 React 建立了一个迷你网站 - 一切都工作正常，直到我今天登录。现在我无法渲染它，而是收到以下错误：“AbortController”未定义”。

部分代码是：

const useFetch = (url) => {
    const [data, setData] = useState(null);
    const [isPending, setIsPending] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const abordCont = new AbortController();

        setTimeout(() => {
            fetch(url, { signal: abordCont.signal })
            .then(res => {
                if(!res.ok) {
                    throw Error('could not fetch data for that recource');
                }
                return res.json();
            })
            .then(data => {
                setIsPending(false);
                setData(data);
                setError(null);
            })
            .catch(err => {
                if (err.name === 'AbortError') {
                    console.log('fetch aboarded');
                } else {
                    setIsPending(false);
                    setError(err.message);
                }
            })
        }, 1000);

        return () => abordCont.abort();
    }, [url])

    return {error, isPending, data};
}

我已经尝试升级节点，它已经是最新版本（v17.9.0）并返回到版本 16，但没有任何帮助。关于如何解决这个问题有什么想法吗？

提前致谢！

Answer 1

Node 仅用于运行 webpack 或其他（包构建器），将 React 代码与 index.html、styles.css 和 index.js 的静态包兼容。它还运行不包含在最终构建器中的开发服务器。反应代码，除非它是服务器端应用程序，否则将在用户计算机上执行，因此每当您想要访问全局函数时，都应该尝试从 window 对象获取它们。

你应该试试 const controler = new window.AbortController()

尽管 stackbllitz 上的一个简单的新 React starter 可以让您直接运行 AbortController()， https: //stackblitz.com/edit/stackblitz-starters-ggksv4 ?file=src%2FApp.tsx 但它必须与您当前的捆绑器相关联设置。