"React 熱鍵無法訪問更新狀態"

Question

我正在使用react-hotkeys<\/code>庫提供的GlobalHotKeys<\/code>在輸入指定的鍵盤快捷鍵時觸發某些事件。 但是處理函數無法獲取狀態的更新值。 以下是我使用的代碼。

代碼沙箱代碼可在此處獲得：此鏈接<\/a>

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

Answer 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

Answer 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>