0

Суть игры: подбрасывание монетки. Есть некий баланс монет, который уменьшается или увеличивается в случае выигрыша или проигрыша. Проблема такова: почему-то баланс вне зависимости от того, какой исход игры уменьшается на первом ходе. Далее баланс обновляется корректно, но с задержкой в один ход. (то есть если у вас вначале проигрыш, а потом выигрыш, то тогда, когда баланс должен увеличится(выигрыш), он уменьшится. И только на следующем ходу увеличится.


function Game() {
    const faces = ["heads", "tails"];
    const [selectedFace, setSelectedFace] = useState("");
    const [coinFlipResult, setCoinFlipResult] = useState(null);
    const [balance, setBalance] = useState(500)
    const [bet, setBet] = useState(0)
    const flip = () => {
        if(!selectedFace) return
        let index;
        if (Math.random() < 0.5) {
            index = 0;
        } else {
            index = 1;
        }
        setCoinFlipResult(faces[index]);
    };

    const zeroingout = () => {
        setCoinFlipResult(null)
        setSelectedFace(null)
    }
    const changeBalance = () => {
        if(!selectedFace || !coinFlipResult) return
        if (coinFlipResult === selectedFace) {
            setBalance(+balance + bet)
        }
        else {
            setBalance(+balance - +bet)
        }

    }
    console.log(coinFlipResult === selectedFace)
    const showResult = () => {
        if(!selectedFace || !coinFlipResult) return
        if (coinFlipResult === selectedFace) {
            return <p>you win</p>;
        }
        else {
            return <p>you lost</p>;
        }
    };
    return (
        <div>
            <p style={{left: '100px', position: 'absolute', marginTop: '5px'}}>Your balance: {balance}</p>
            <input style={{left: '100px', position: 'absolute', marginTop: '25px'}}
            placeholder="Сделайте ставку"
            onChange={e => setBet(e.target.value)}/>
            <div>
                <h1>select a face</h1>
                <button onClick={() => { zeroingout()
                    setSelectedFace("heads")}}>
                    heads
                </button>
                <button onClick={() => { zeroingout()
                    setSelectedFace("tails")}}>
                    tails
                </button>
            </div>
            <p>you selected: {selectedFace}</p>
            <button onClick={() => {
                flip();
                changeBalance();
            }}>flip coin</button>
            {showResult()}
        </div>
    );
}

export default Game```

1 ответ 1

1

В Реакте изменение стейта асинхронно - в частности, значение coinFlipResult изменяется не сразу, после вызова setCoinFlipResult.

При нажатии на кнопку flip coin вызывается сначала flip и потом сразу changeBalance. Реакт это видит и откладывает изменение coinFlipResult до тех пор, пока не завершатся все функции, вызванные в обработчике onClick. Поэтому внутри changeBalance оказывается предыдущее значение coinFlipResult.

Возможное решение - передавать в changeBalance аргументом результат броска:

const changeBalance = (flipResult) => {
  if (flipResult === selectedFace) {
    setBalance(+balance + +bet);
  } else {
    setBalance(+balance - +bet);
  }
};

и вызывать ее в flip:

const flip = () => {
  if (!selectedFace) return;
  let index;
  if (Math.random() < 0.5) {
    index = 0;
  } else {
    index = 1;
  }
  setCoinFlipResult(faces[index]);
  changeBalance(faces[index]);
};

А в onClick на кнопке flip coin убрать вызов changeBalance и оставить только вызов flip:

<button onClick={() => {
  flip();
}}>flip coin</button>
1
  • большое спасибо за объяснение и помощь! Все сработало 5 фев 2022 в 12:16

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.