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

【问题标题】：Why am I getting NaN when trying to display average from two state values?为什么在尝试显示两个状态值的平均值时会得到 NaN？
【发布时间】：2021-10-24 19:57:44
【问题描述】：

这里是新手。尝试学习 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

Image for context

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

【问题讨论】：

你的初始值都是零，你的第一个计算是 0/0 ，它的值是 NaN，它与 React 无关。
你想得到平均值，但你的计算是(good - bad) / all。这不是获得数学平均值的方法，伙计。像这样sumOfAllGood / totalCountOfGood

标签： javascript reactjs react-state-management

【解决方案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);
}

【讨论】：

感谢您的明确答复！

【解决方案2】：

您得到 NaN 是因为您除以 0/0 并且没有正确计算平均值。您应该使用新的好、坏、... 值作为平均值。

在这部分代码中：

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

您正在计算所有旧值的平均值，在您的状态下很好。

顺便说一句，添加 Math.abs 可以避免得到负平均值。

这是您的 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)
  }

【讨论】：