React 热键无法访问更新状态

Posted 2023-03-17

【中文标题】React 热键无法访问更新状态

【英文标题】：React Hotkeys cannot access updated state

【发布时间】：2021-01-15 20:59:20

【问题描述】：

我正在使用react-hotkeys 库提供的GlobalHotKeys 在输入指定的键盘快捷键时触发某些事件。但是处理函数无法获取状态的更新值。以下是我使用的代码。

代码沙盒代码可在此处获得：this link

import React from 'react'
import  GlobalHotKeys  from 'react-hotkeys'

function Playground() 

  const [count, setCount] = React.useState(0)

  const handleEvent = React.useCallback(() => 
    console.log("Count Value now is: ", count)
  , [])

  return (
    <GlobalHotKeys
      keyMap=
        FOCUS_BARCODE: 'alt+a'
      
      handlers=
        FOCUS_BARCODE: handleEvent
      >
      <div>
        <h1>Here is count value: count</h1>
        <button onClick=() => setCount((count) => count + 1)> Increase Count</button>
      </div>
    </GlobalHotKeys>
  )


export default Playground

现在发生了什么

任何时候我点击alt+a，它的控制台日志都算作0。我点击了Increase count 按钮并增加了count 的值，然后点击alt+a 仍然将count 的值设为0。

我需要什么

我想用热键打印count 的更新值。

【参考方案1】：

我已更新您的代码示例以使用热键。您必须将控制台日志放入 useEffect 调用中，因为这是副作用。

import React,  useEffect  from "react";
import  GlobalHotKeys  from "react-hotkeys";

function Playground() 
  const [count, setCount] = React.useState(0);

  const handleEvent = React.useCallback(() => 
    setCount((count) => count + 1);
  , [setCount]);

  useEffect(() => 
    console.log("Count Value now is: ", count);
  , [count]);

  return (
    <GlobalHotKeys
      keyMap=
        FOCUS_BARCODE: "alt+a"
      
      handlers=
        FOCUS_BARCODE: handleEvent
      
    >
      <div>
        <h1>Here is count value: count</h1>
        <button onClick=() => setCount((count) => count + 1)>
          " "
          Increase Count
        </button>
      </div>
    </GlobalHotKeys>
  );


export default Playground;

沙盒 - https://codesandbox.io/s/laughing-newton-08vyv

useEffect - https://reactjs.org/docs/hooks-effect.html

【讨论】：

那也没用。即使不传递依赖数组也不起作用。

我的回复更新了，请看代码沙箱

这仍然不起作用，因为按 alt+a 会增加计数。我只想在按下alt+a时打印计数值而不增加计数值。

请看一下更新后的沙箱，它现在可以工作了。

解决了我自己的问题，对于需要访问处理程序内的多个状态的任何其他人，将它们添加到依赖项列表并在 HotKey 组件上将 'allowChanges' 属性设置为 True。

【参考方案2】：

你必须添加allowchanges..

<GlobalHotKeys
      keyMap=
        FOCUS_BARCODE: 'alt+a'
      
      handlers=
        FOCUS_BARCODE: handleEvent
       
     allowChanges=true
  >
      <div>
        <h1>Here is count value: count</h1>
        <button onClick=() => setCount((count) => count + 1)> Increase Count</button>
      </div>
    </GlobalHotKeys>