在我的React Typescript计数器中的赢率逻辑NaN错误。

Question

我正在做一个简单的Typescript计数器来跟踪我玩的Legends of Runeterra游戏的胜率。我不明白为什么当我递增胜负时，我得到的是NaN作为我的胜率。这个逻辑似乎很好（显然你现在不能递减，这是以后的问题），我现在只想集中精力解决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

谢谢你来看！

Answer 1

的 setWins, setLosses, setTotalGames and setWinPercentage 都是异步函数。所以当你第一次调用 winPercentageCalc这就是发生的事情。

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

当你用总胜场数除以总胜场数时，总胜场数还没有更新，所以你除以0，结果是NaN（不是一个数字）。