如何使用 React hook useEffect 添加事件处理程序取决于状态？

【问题标题】：How to use react hook useeffect with adding event-handler depended on state?如何使用 React hook useEffect 添加事件处理程序取决于状态？
【发布时间】：2020-01-03 10:21:18
【问题描述】：

我有一个授权组件，包括另一个组件 - 用户名、密码等字段。我尝试创建反应挂钩 useeffect，我想在“X”keyDown 事件上添加订阅。在这个事件中，我想执行 Authorize() 函数，该函数位于组件主体（不是钩子主体）中，并且取决于授权组件状态。

所以，我找到的唯一解决方案是：

  useEffect(() => {
    const handleKeyDown = (event) => {
      event.key === 'X' && defineIsAuthorizationAvailable() && authorize()
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  })

但我认为它不正确，因为这种订阅/取消订阅会在每次用户状态更改时执行。请帮忙。

【问题讨论】：

标签： reactjs event-handling addeventlistener react-hooks use-effect

【解决方案1】：

所以，您想根据布尔状态值在useEffect 中运行某些函数，对吗？如果是这样，您可以在 useEffect 钩子中使用条件，并在某些状态更改时重新渲染。例如，像这样：

 useEffect(() => {
if(authorizeBoolean) {
const handleKeyDown = (event) => {
      event.key === 'X' && defineIsAuthorizationAvailable() && authorize()
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
}

}, [authorizeBoolean]);

【讨论】：

好答案。只是authorizeBoolean 不应该限制添加监听器。相反，应该只限制authorize()。
如果你的意思是我需要在组件挂载后只切换一次 authorizeBoolean，据我了解，当 Authorize() 执行时，状态项用户将有一个 value = initialValue，这是不正确的。跨度>