为什么我得到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呢?

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);
}

Answer 2

你得到NaN是因为你除以0/0而没有正确计算平均值。你应该用新的好，坏，…平均值

在这部分代码中:

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

你是在计算你所在州所有好的旧值的平均值。

顺便说一下，加上数学。b避免得到负的平均值。

这是handleGood函数的更新版本。

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