Реакция не обновляет состояние должным образом - PullRequest
Новая
       80

Реакция не обновляет состояние должным образом

1 голос
/ 22 апреля 2020

Я создаю простую случайную игру в кости с использованием функциональных компонентов jsx, однако, когда я нажимаю кнопку, которая создает бросок, отображается состояние поста. Вот мой код для компонента (уменьшенный ненужный код), довольно новый для кодирования, так что извините, если он немного грубоват. Также вот пример того, как это происходит: https://gyazo.com/3f708e053a361e85e9b91d84b3e1849b

Заранее спасибо! 

import React, { Fragment, useState } from "react";

...

const Dice = () => {


    // Declare state
    const [gameState, setState] = useState("roll");
    const [randomRoll, setRandom] = useState(13.37);
    const [rollSep, setRollSep] = useState([0, 0, 0, 0]);

    // Roll the dice animation
    const roll = () => {
        setState("Rolling...");


        setTimeout(() => {

            setRandom(Math.floor(Math.random() * 10000) / (1 * 100))
            setState("Rolled " + randomRoll);

        }, 500);
    };

    return (
        <Fragment>
            <Box>

                ...

                {animationState === "blitz" ? (
                    <StyledBlitz transform={`translateX(${randomRoll}%)`}>
                        <h2>{randomRoll}</h2>
                        <img src={dice} alt="dice" />
                    </StyledBlitz>
                ) : null}

                ...

                <Button
                    onClick={roll}
                >
                    {gameState}
                </Button>

            </Box>
        </Fragment>
    );
};

export default Dice;
...