为什么我在尝试显示两个状态值的平均值时得到 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

Image for context

更改状态的最佳方法是什么？应该怎么做才能使 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,
    }

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

顺便说一句，添加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)
  }

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

Why am I getting NaN when trying to display average from two state values?

javascript

reactjs

react-state-management