Question

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

因此，我发现的唯一解决方案是：

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

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

Answer 1

因此，您要根据布尔状态值在useEffect中运行某些功能，对吗？如果是这样，则可以在useEffect挂钩中使用条件，并在某些状态更改时重新呈现。例如，如下所示：

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

}, [authorizeBoolean]);

如何通过添加状态处理程序来使用react hook的useeffect取决于状态？

1 个答案: