State 鈎子不改變 boolean 值

Question

在下面的代碼中，我遇到了問題。

我試圖實現doubleClick行為和 boolean 更改的 state 掛鈎以觸發它。 問題是，即使觸發了handleDoubleClick function， setAllowSingleClick也沒有將值更改為false，所以無論如何handleClick function 都會被觸發。

        const CLICK_DELAY_TIME = 200;
        const [allowSingleClick, setAllowSingleClick] = useState(true);
        let timer = 0;
        
          const handleClick = () => {
            timer = setTimeout(() => {
              if (allowSingleClick) {
                doSMTH1()
              }
            }, CLICK_DELAY_TIME);
          };
        
          const handleDoubleClick = () => {
            clearTimeout(timer);
            setAllowSingleClick(false);
            doSMTH();
          };

        <div
          onClick={handleClick}
          onDoubleClick={handleDoubleClick}
        >

Answer 1

不要在嵌套回調上useState() 。 useRef()代替。

useState()本身只是一種鈎子返回值和設置器。 也異步工作。

當 setTimeout() 回調 function 構造時，allowSingleClick 變量的值在回調定義中是固定的（稱為閉包）。

useRef()返回的是 object：引用.current屬性時評估的值。

示例代碼

import React from "react";
import { useRef } from "react";

function App() {
  const CLICK_DELAY_TIME = 200;
  const allowSingleClickRef = useRef(true);
  const doSMTH1 = () => console.log("!!!");
  const doSMTH = () => console.log("???");
  let timer = null;

  const handleClick = () => {
    timer = setTimeout(() => {
      if (allowSingleClickRef.current) {
        doSMTH1();
      }
    }, CLICK_DELAY_TIME);
  };

  const handleDoubleClick = () => {
    clearTimeout(timer);
    allowSingleClickRef.current = false;
    doSMTH();
  };

  return (
    <div
      style={{ backgroundColor: "red", width: "100vw", height: "100vh" }}
      onClick={handleClick}
      onDoubleClick={handleDoubleClick}
    />
  );
}

export default App;

更多閱讀： Dan Abramov 使用 React Hooks 使 setInterval 聲明式