function 不會使用更新的 state 如果 setState function 在 react 開始執行后被調用

Question

我試圖通過睡眠 function 來控制 state 更改（板）的速度，該值由獲取值的 slider 組件控制，該組件更新狀態。 問題是當我嘗試在函數（handlePlayClick）開始后更改延遲（速度）的值時。 那么 function 使用的值是更改前的初始值。

const [board, setBoard] = useState(createBoard(9));
  const [steps, setSteps] = useState();
  const [speed, setSpeed] = useState(200);

const handlePlayClick = async () => {
    const allSteps = deepCopy(steps);

    for (let i = 0; i < allSteps.length; i++) {
      setBoard(allSteps[i]);
      await sleep(speed);
    }
  };

const hanleSpeedChange = (e, v) => {
    setSpeed(v);
  };

<Slider
        className={classes.slider}
        value={speed}
        min={1}
        max={2000}
        onChange={hanleSpeedChange}
      />

睡眠 function：

export default (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

Answer 1

即使在調用 function 之后，確保您始終擁有更新的速度值的一種方法是使用 useRef Hook：

  const speedRef = useRef(200);

  const hanleSpeedChange = (e, v) => {
    speedRef.current = v;
    setSpeed(v);
  };

  const handlePlayClick = async () => {
    const allSteps = deepCopy(steps);

    for (let i = 0; i < allSteps.length; i++) {
      setBoard(allSteps[i]);
      await sleep(speedRef.current);
    }
  };