javascript - 为什么在尝试显示两个状态值的平均值时会得到 NaN？

Question

新手来了 尝试学习 React 并且我目前正在尝试显示average=(good+bad)/all 但是，我一直得到NaN我假设我得到的结果，因为我的状态值都是 0。我很困惑为什么这是因为在调用后setClicks(newStats)我认为统计信息已更新。

import React, { useState } from "react"


const App = () =>{
  const [stats,setClicks] = useState({good:0,neutral:0,bad:0,all:0,positive:0,average:0})

  const handleGood=()=>
  {
    const newStats={
    ...stats,
    all: stats.all +1,
    good:stats.good +1,
    average: (stats.good - stats.bad)/stats.all,
    }
    setClicks(newStats)
    console.log("Stats.good",stats.good)
    console.log("Stats.bad",newStats.bad)
    console.log("Stats.all",stats.all)
  }

  const handleBad=()=>
  {
    const newStats= {
      ...stats,
      bad: stats.bad+1,
      all: stats.all+1,
      average: (stats.good - stats.bad)/stats.all,
    }
    setClicks(newStats)
  }

  const handleNeutral =() =>
  {
    const newStats={
      ...stats,
      neutral:stats.neutral +1,
      all: stats.all+1,
      average: (stats.good - stats.bad)/stats.all,
    }
    setClicks(newStats)
  }

  
  
  const Button =({handleClick,text})=>{
    return(
    <button onClick={handleClick}>{text}</button> )
  }
  
  
  return(
    <div>
      <h1>Give Feedback</h1>
      <Button handleClick={handleGood} text="good"/>
      <Button handleClick={handleNeutral} text="neutral"/>
      <Button handleClick={handleBad} text="bad"/>
      <br/>
      <h2>Statistics</h2>
      <p>good: {stats.good}</p>
      <p>neutral: {stats.neutral}</p>
      <p>bad: {stats.bad}</p>
      <p>all:{stats.all}</p>
      <p>average: {stats.average}</p>
      <p>positive: {stats.positive}</p>

    </div>
  )
}

export default App

上下文图像

改变状态的最佳方法是什么？应该怎么做NaN才不会出现？

标签： javascriptreactjsreact-state-management

Answer 1

对于平均值的初始计算，您需要使用更新后的值：

const handleGood= () => {
  const newAll = stats.all + 1;
  const newGood = stats.good + 1;
    const newStats={
      ...stats,
      all: newAll ,
      good:newGood ,
      average: (newGood - stats.bad)/newAll,
    }
    setClicks(newStats);
}