Логическая ошибка NaN в моем счетчике React Typescript для процента выигрыша - PullRequest
Новая
       9

Логическая ошибка NaN в моем счетчике React Typescript для процента выигрыша

0 голосов
/ 23 апреля 2020

Я делаю простой счетчик Typescript, чтобы отслеживать мой процент выигрыша в играх Legends of Runeterra, в которые я играю. Я не могу понять, почему, когда я увеличиваю выигрыш или проигрыш, я получаю NaN в качестве процента выигрыша. Логика c выглядит нормально (очевидно, вы не можете уменьшить сейчас, это проблема на потом), сейчас я просто хочу сосредоточиться на исправлении ошибки NaN.

Вот мой компонент счетчика: 

import React, { useState } from 'react'

// add a ? after the type name if you want any one of these to be optional, ex: wins?
const Counter: React.FC<{
  initialGamesPlayed: number
  initialWins: number
  initialLosses: number
  initialWinPercentage: number
  initialDeckName: string
}> = ({
  initialDeckName,
  initialWinPercentage,
  initialWins,
  initialLosses,
  initialGamesPlayed,
}) => {
  const [deckName, setDeckName] = useState(initialDeckName)
  const [wins, setWins] = useState(initialWins)
  const [losses, setLosses] = useState(initialLosses)
  const [totalGames, setTotalGames] = useState(initialGamesPlayed)
  const [winPercentage, setWinPercentage] = useState(initialWinPercentage)

  const incrementWins = () => {
    setWins(wins + 1)
    winPercentageCalc()
    console.log(winPercentage)
  }
  const decrementWins = () => {
    if (wins > 0) setWins(wins - 1)
    winPercentageCalc()
  }
  const incrementLosses = () => {
    setLosses(losses + 1)
    winPercentageCalc()
    console.log(winPercentage)
  }
  const decrementLosses = () => {
    if (losses > 0) setLosses(losses - 1)
    winPercentageCalc()
  }
  const winPercentageCalc = () => {
    setTotalGames(wins + losses)
    setWinPercentage((wins / totalGames) * 100)
  }

  return (
    <div>
      <p>Deck Name: </p>
      <p>wins: {wins} </p>
      <button onClick={incrementWins}>+</button>
      <button onClick={decrementWins}>-</button>
      <p>losses: {losses}</p>
      <button onClick={incrementLosses}>+</button>
      <button onClick={decrementLosses}>-</button>
      <p>Win Percentage: {winPercentage} % </p>
    </div>
  )
}

export default Counter

Спасибо, что заглянули!

1 Ответ

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

setWins, setLosses, setTotalGames and setWinPercentage - все асинхронные функции. Поэтому при первом вызове winPercentageCalc происходит следующее: 

const winPercentageCalc = () => {
    setTotalGames(wins + losses) // This is asynchronous, so...
    setWinPercentage((wins / totalGames) * 100) // totalGames = 0 => NaN
}

Когда вы делите выигрыши на totalGames, totalGames не обновляется, поэтому вы делите на 0, что дает NaN (не число) как результат

...