ReactsetStates只更新一次狀態并重置它-有解無憂

你好，我是 React 的新手，我正在嘗試制作一個有點像蛇的游戲，但我在運動中掙扎。

x 和 y 值從來沒有真正改變過他只能移動一個像 1 個網格單元，但是當我按下另一個鍵時，他 jsut 轉到起始位置并在另一個方向移動 1 個單元格..我錯過了什么？

function App() {

    const [_x, setX] = useState(0);
    const [_y, setY] = useState(0);

    let lastPressedKey = '';
    let gameTicker = null;


    function triggerMovement(x, y) {
        if (lastPressedKey === 100)
            move(10, 0);

        if (lastPressedKey === 97)
            move(-10, 0);

        if (lastPressedKey === 119)
            move(0, 10);

        if (lastPressedKey === 155)
            move(0, -10);
    }

    function move(x, y){
        console.log(lastPressedKey);
        console.log(x, _x, y, _y);
        setX(_x   x);
        setY(_y   y);
    }

    function handleKeyEvent(event) {
        lastPressedKey = event.keyCode;
    }

    function startTimer() {
        gameTicker = setInterval(triggerMovement, 1000);
    }

    function clearTimer() {
        clearInterval(gameTicker)
    }

    const element = (
        <div>
            <Screen farbe="darkslategray">
                <Snake x={_x} y={_y} farbe="red"/>
            </Screen>
            <button onClick={startTimer} style={{
                bottom: 5,
                position: 'absolute'
            }}>
                Start Game
            </button>
            <button onClick={clearTimer} style={{
                bottom: 5,
                left: 625,
                position: 'absolute'
            }}>
                StopGame
            </button>
        </div>
    )

    window.addEventListener('keypress', handleKeyEvent, true);

    return element;
}

function Snake(props){

    const [x, setX] = useState(250);
    const [y, setY] = useState(250);
    let speed = props.speed;

    const element = (
        <div style={{
            width: 10,
            height: 10,
            backgroundColor: props.farbe,
            position: 'absolute',
            left: props.x,
            bottom: props.y
        }}>

        </div>
    )
    return element;
}

真的很想支持這件事，但是從今天早上開始，我就想讓這條蛇動起來，我想知道我在這里錯過了什么。

控制臺日志總是

10, 0 , 0 , 0
10, 0 , 0 , 10
10, 0 , 0 , 0 ...

uj5u.com熱心網友回復：

這是因為過時的閉包。

這里

function move(x, y){
    console.log(lastPressedKey);
    console.log(x, _x, y, _y);
    setX(_x   x);
    setY(_y   y);
}

_x并且_y正在從您呼叫該startTimer函式的渲染中參考值。

你可以使用函式形式的setState來避免這個問題：

setX(ps => ps x)

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/389832.html

標籤：javascript 反应反应钩子

上一篇：如何使用javascript包含一個php檔案

下一篇：節點是否需要更改？