我可以在不使用 useState 的情况下访问 useEffect 中的变量吗？

Posted 2023-03-17

【中文标题】我可以在不使用 useState 的情况下访问 useEffect 中的变量吗？

【英文标题】：Can I access a variable inside useEffect without use useState?

【发布时间】：2021-11-17 00:19:47

【问题描述】：

我想在不使用 useState 的情况下访问 useEffect 挂钩中的变量。我该怎么做？

这是我的代码：

let numberOfLessons;

useEffect(() => 
        getLessons()
            .then(response => 
                numberOfLessons = response.data().length // 6
            )
            .catch(error => 
                console.log(error)
            )
    , [])


console.log(numberOfLessons) // undefined

【问题讨论】：

您不能从函数外部访问函数内部声明的变量。使用useState有什么问题？

let 的作用域问题是块作用域，因此在定义块之外引用它是不行的。

您是说在 useEffect 内部但在外部访问它？ let 有一个块作用域，所以你不能在外面访问它。

首先，您尝试访问一个仅在“then”回调函数中声明且可用的变量。所以对你的问题的回答是否定的，如果你需要全局访问这个变量，你应该使用 useState 或者考虑使用状态管理工具，例如 Redux、MobX 等。

在您的原始帖子中，您使用let 在 then 回调中定义了变量。现在您可以在该特定代码块之间的任何位置访问该变量，即在 和 之间。现在在您编辑的帖子中，您已将声明向上移动，现在您可以使用它访问变量。但是您仍然会打印undefined，因为当console.log 执行时，您的numberOfLessons = response.data().length 正在callstack 中等待event loop 接收。这意味着您将获得undefined，因为这是您的numberOfLessons 变量的初始值。

【参考方案1】：

没有什么可以阻止你这样做。但缺点是你的变量不是 React 状态的一部分。

它的值最初设置为undefined。稍后当您将其设置为 6 时，不会触发 React 重新渲染视图，因此您的 6 可能永远不会出现在屏幕上。

但也许这对你来说并不重要。如果仅使用此变量，例如对于日志记录，React 是否知道它并不重要。

---

在您的确切示例中，console.log 未定义，因为您正在记录 在值设置之前。这并不是真正的 React 特定问题。这就是异步代码的工作方式。如果你这样做了

setTimeout(() => console.log(numberOfLessons), 5000)

那么您将按预期获得6。