React函数组件useState/useEffect状态滞后问题求助

问题分析 #

代码中状态滞后的核心原因有两个：

1. setDice是异步更新状态的，调用getRoll()后立刻执行rollDice()时，dice状态还未完成更新，此时cheatValue仍为旧值，导致骰子动画显示上一次的点数。
2. useEffect的依赖数组包含dice，每次dice变化都会重新创建定时器，引发不必要的重复执行，进一步加剧状态不同步问题。

修复方案 #

以下是修改后的核心代码，针对问题点逐一优化：

主视图组件（无需修改）

import React, { useState, useRef } from "react";
import DiceComponent from "./dice-component";

function View() {
  const [dice, setDice] = useState(0);
  const diceRef = useRef(null);

  return (
    <div>
      <DiceComponent setDice={setDice} diceRef={diceRef} dice={dice} />
      current throw: {dice}
    </div>
  );
}
export default View;

修改后的骰子组件

import Dice from "react-dice-roll";
import React, { useEffect, useCallback } from "react";

function DiceComponent({ diceRef, setDice, dice }) {
  // 用useCallback包裹roll函数，保证引用稳定
  const roll = useCallback(() => {
    // 生成1-6的正确骰子点数（原代码*5会导致范围是1-5，这里修正）
    const diceRoll = Math.floor(Math.random() * 6) + 1;
    // 利用setDice的回调，在状态更新完成后再触发动画
    setDice(diceRoll, () => {
      rollDice();
    });
  }, [setDice]);

  const rollDice = () => {
    if (diceRef?.current) {
      diceRef.current.style.pointerEvents = "auto";
      diceRef.current.children[0].click();
      diceRef.current.style.pointerEvents = "none";
    }
  };

  useEffect(() => {
    // 仅在组件挂载时创建一次定时器，卸载时清理
    const interval = setInterval(() => {
      roll();
    }, 3500);
    return () => clearInterval(interval);
  }, [roll]); // 依赖稳定的roll函数引用

  return (
    <div>
      <div ref={diceRef} style={{ pointerEvents: "none" }}>
        {/* 用dice作为key的一部分，确保状态变化时Dice组件重新渲染 */}
        <Dice size={100} cheatValue={dice} key={`dice-${dice}`} />
      </div>
    </div>
  );
}
export default DiceComponent;

关键修改说明 #

• 异步状态更新处理：使用setDice的第二个回调参数，确保只有在状态完全更新后才触发骰子动画，此时cheatValue已经是最新点数。
• 稳定定时器依赖：用useCallback包裹roll函数，让useEffect的依赖保持稳定，避免每次dice变化都重建定时器，保证定时逻辑仅执行一次。
• 强制组件重渲染：给Dice组件添加包含dice的key，当点数变化时强制组件重新渲染，确保cheatValue的新值立即生效。
• 修正点数范围：将Math.floor(Math.random() * 5) + 1改为Math.floor(Math.random() * 6) + 1，生成符合常规骰子的1-6点数（如果你的需求确实是1-5，可以忽略此修改）。

内容的提问来源于stack exchange，提问作者civlon