在自定义后端插件中使用setTimeout会在加载时杀死Chrome选项卡

Question

我正在尝试实现自定义后端，但是每当我以任何异步方式调用callback函数时，我的整个应用程序都将挂起，并且必须杀死浏览器中的选项卡。它仅在useSuspense: true中发生。通过在运行时查看代码，看来我最终在React中陷入了无限循环。

---

以下是工作示例的链接：https://codesandbox.io/s/q8zmxvnn29

取消注释索引文件中的<React.Suspense fallback={<p>Loading...</p>}>标签，重新加载后整个标签页将冻结。

---

这是我的自定义后端的外观：

.use({
    type: "backend",
    read: (lng: string, ns: string, callback: any) => {

        // ==============
        // Kills the tab
        // ==============
        setTimeout(() => {
            callback(null, {
                key1: "value1",
                key2: "value2",
            })
        }, 3000)

        // ==============
        // Works
        // ==============
        // callback(null, {
        //     key1: "value1",
        //     key2: "value2",
        // })
    }
})

我假设我缺少关于React如何处理HOC的一些基本规则，但是我无法弄清楚我做错了什么，或者超时为什么会阻塞整个应用程序。