亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React SetState 被忽略

React SetState 被忽略

慕后森 2023-02-17 10:04:58
我正在嘗試制作一個從 1.0 開始并增加 0.1 直到達到隨機數的計時器。您必須在組件呈現 5 秒后啟動“會話”,這一切都正常。問題是我希望一個會話在另一個會話結束后 5 秒開始,而 React 忽略了允許下一個會話的 setState,我不明白為什么。注意:只有當我創建一個調用切換功能的按鈕 setIsGameActive(isGameActive => isGameActive = !isGameActive) 并單擊它時它才有效const GamePanel = () => {    const [gameTime, setGameTime] = useState(1);    const [isGameActive, setIsGameActive] = useState(false);    const [gameEndTime, setGameEndTime] = useState(0);    const [lastResults, setLastResults] = useState([]);    let randomNumber = 0;    const useFirstTime = useRef({firstTime: true});    const makeRandomNumber = (min, max) => {        return min + (max - min) * Math.random()    }   onst reset = () => {        setGameTime(1);        setIsGameActive(false); //ignored    }    const gameStart = () => {        if(useFirstTime.current.firstTime === false){            if(!isGameActive){                console.log("Game starting...");                randomNumber = makeRandomNumber(1.1, 5);                setGameEndTime(randomNumber.toFixed(1))                setIsGameActive(true);            }        }    }    const gameFinished = () => {        setTimeout(()=>{            reset();            gameStart()        }, 5000)    }    useEffect(() => {        if(useFirstTime.current.firstTime === true){            useFirstTime.current.firstTime = false;            setTimeout(() => {                gameStart();            }, 5000);        }        let interval = null;        if(isGameActive){            interval = setInterval(() => {                if(gameTime.toFixed(1) !== gameEndTime){                    setGameTime(gameTime => gameTime + 0.1)                }                if(gameTime.toFixed(1) === gameEndTime){                    clearInterval(interval)                    gameFinished();                }            }, 100);
查看完整描述

1 回答

?
開心每一天1111

TA貢獻1836條經驗 獲得超13個贊

每次渲染組件時都會創建重置函數。因此,計時器內部的重置引用與重新渲染后的組件本身不同。嘗試使用useCallback重置來創建函數的記憶版本:https://reactjs.org/docs/hooks-reference.html#usecallback


    const reset = useCallback(() => {

        setGameTime(1);

        setIsGameActive(false); //ignored

    },[])


查看完整回答
反對 回復 2023-02-17
  • 1 回答
  • 0 關注
  • 108 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號