Javascript 单击按钮时不更新值

作为一个学习练习，我试图编写一个通用反馈应用程序，计算“好”（+1）、“坏”（-1）和“中性”（0）按钮单击次数、它们的值之和、平均值和正百分比

现在我注意到这个总和，而且是唯一的总和值在某种程度上滞后于事件后单击一个按钮，例如，第一次单击“good”按钮将产生“NaN”的平均值。我假设总和仍然是“零”。其余的值正在按预期更新

谁能解释一下我在这里遗漏了什么？App.js代码如下：

import React, {useState} from 'react'

const Button = (props) => {
  return (
    <>
    <button onClick = {props.handleClick}>{props.text}</button>
  </>
  )
}

const App = () => {
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)

  const [all, setAll] = useState(0)
  const [sum, setSum] = useState(0)

  const [average, setAverage] = useState(0)
  const [positive, setPositive] = useState(0)

  const [history, setHistory] = useState([])

  const handleGoodClick = () => {
    setAll(all + 1)
    setSum(sum + 1)
    setGood(good + 1)

    setHistory(history.concat(1))
    setPositive(good / all)
    setAverage(sum / all)

  }

  const handleBadClick = () => {
    setAll(all + 1)
    setSum(sum - 1)
    setBad(bad + 1)

    setHistory(history.concat(-1))
    setPositive(good / all)
    setAverage(sum / all)
  }

  const handleNeutralClick = () => {
    setAll(all + 1)
    setNeutral(neutral + 1)

    setHistory(history.concat(0))
    setPositive(good / all)
    setAverage(sum / all)

  }

  return (
    <>
      <h2>Give Feedback</h2>
      <Button handleClick = {handleGoodClick} text = {'good'}/>
      <Button handleClick = {handleNeutralClick} text = {'neutral'}/>
      <Button handleClick = {handleBadClick} text = {'bad'}/>

      <h2>Statistics</h2>
      <p>Good: {good}</p>
      <p>Neutral: {neutral}</p>
      <p>Bad: {bad}</p>
      <p>All: {all}</p>
      <p>Average: {average}</p>
      <p>Positive: {positive}</p>
      <p>History: {history.join(' ')}</p>
    </>
  )
}

export default App

import React，{useState}来自“React”
常量按钮=（道具）=>{
返回(
{props.text}
)
}
常量应用=（）=>{
常数[good，setGood]=useState（0）
常数[neutral，setNeutral]=useState（0）
const[bad，setBad]=useState（0）
const[all，setAll]=useState（0）
const[sum，setSum]=useState（0）
常量[average，setAverage]=使用状态（0）
常数[positive，setPositive]=useState（0）
const[history，setHistory]=useState（[]）
const handleGoodClick=（）=>{
setAll（全部+1）
设定值（总和+1）
设置良好（良好+1）
setHistory（history.concat（1））
设置为正（良好/全部）
设置平均值（总和/全部）
}
const handleBadClick=（）=>{
setAll（全部+1）
设定值（总和-1）
挫折（坏+1）
setHistory（history.concat（-1））
设置为正（良好/全部）
设置平均值（总和/全部）
}
const handleNeutralClick=（）=>{
setAll（全部+1）
设置空档（空档+1）
setHistory（history.concat（0））
设置为正（良好/全部）
设置平均值（总和/全部）
}
返回(
反馈
统计
好：{Good}

中性：{Neutral}

坏：{Bad}

全部：{All}

平均值：{Average}

正：{正}

历史记录：{History.join（“”）}

)
}
导出默认应用程序

尝试重构为如下内容：

  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)

  const handleGoodClick = () => {
    setGood(good + 1)
  }

  const handleBadClick = () => {
    setBad(bad + 1)
  }

  const handleNeutralClick = () => {
    setNeutral(neutral + 1)
  }

  const all = good + bad + neutral;
  const positive = good / all;
  const sum = good - bad;
  const average = sum / all;

---

阅读这篇文章了解更多细节：

作为旁注，我认为将

sum

、

all

、

average

和

positive

的值保留在状态对我来说没有多大意义，因为它们是从其他状态变量（

good

、

neutral

和

bad

）计算出来的。要使用前一个状态，我将尝试使用函数集，例如：

setAll（（all）=>all+1）

yep，明白。这些都是因为我完全忘记了它们。

sum

和

all

可以从你已经有的状态中派生出来

const sum=good+neutral+bad

这样可以避免与状态不同步相关的错误。您的问题可能是因为状态更新是批处理在一起的，而在您更新平均值时，sum尚未更新。@rustyBucketBay eeeh，详细说明？谢谢，@Oskar！在函数中包装了

正数

和

平均数

计算之后，我使整个过程正常运行。