ReferenceError：在 React 挂钩中初始化之前无法访问“x”

Question

我在使用 React 中的一段代码时遇到了一些问题。

我创建了一个重现错误的 gh 存储库：https://github.com/AnatoleLucet/next-issue

我正在尝试做一个钩子来获取一些本地数据（在我的真实应用程序中，它是一个翻译系统，但你明白了）。问题是，我在一个名为formatData 的函数中传递了我的数据的每个“部分”（参见data/myData.ts 和data/index.ts），该函数与我的钩子（hooks/myHook.ts）在同一个文件中声明。然后，当我在组件中使用我的钩子时（请参阅pages/index.tsx），我收到以下错误：

我不明白为什么浏览器（或 webpack？）没有在正确的时间初始化 formatData...

我正在使用 Nextjs，但我认为它与问题无关，尽管我还没有尝试过“香草”React 项目。

作为临时修复，我可以将formatData 移动到另一个文件，例如utils/data.ts。

Answer 1

你有一个循环依赖。

• hooks/myHook.ts 从 data/index.ts 导入
• data/index.ts 从 data/myData.ts 导入
• data/myData.ts 从 hooks/myHook.ts 导入