Question

作为一项学习练习，我正在尝试编写一个通用反馈应用程序，该应用程序计算“好”(+1)、“坏”(-1) 和“中性”(0) 按钮点击次数，以及它们的总和值、平均值和正百分比。

现在我注意到总和——而且只是总和！ – 值以某种方式在事件之后滞后一个按钮单击，因为第一次单击，例如，“好”按钮将产生“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

Answer 1

尝试重构为这样的：

  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;

阅读这篇文章了解更多详情：https://kentcdodds.com/blog/dont-sync-state-derive-it

单击按钮时值不会更新

1 个答案: