时间戳

首页 > 解决方案 > 尚未单击按钮时显示 NaN 的 React 应用程序

reactjs - 尚未单击按钮时显示 NaN 的 React 应用程序

问题描述

因此，当我正在学习并尝试做简单的反馈应用程序时，虽然用户尚未选择任何选项，但平均和正百分比显示 NaN 作为值。为什么会这样？我应该使用 .this 吗？感谢您提供任何帮助。我相信这很简单，但找不到任何解决方案。

  console.log({sum})
  console.log({counter})
  const average = sum/counter;
  const positivePercentage = (positive / counter * 100)
  return(
    <div>
      <p>Good {good}</p>
      <p>Neutral {neutral}</p>
      <p>Bad {bad}</p>
      <p>Total Feedbacks: {counter}</p>
      <p>Average: {(Math.round(average*100)/100).toFixed(2)}</p>
      <p>Positive: {(Math.round(positivePercentage*100)/100).toFixed(2)}%</p>
    </div>
  )
}
const Button = ({handleClick, choice}) => {
  return(
    <button onClick={handleClick}>
      {choice}
    </button>
  )
}

const App = () => {
  // save clicks of each button to own state
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)
  const [counter, setCounter] = useState(0)
  const [sum, setSum] = useState(0)
  const [positive, setPositive] = useState(0)


  const voteGood = () => {
    return (
      setGood(good+1),
      setCounter(counter+1),
      setSum(sum+1),
      setPositive(positive+1)
     )
    }
  const voteNeutral = () => {
    return(
      setNeutral(neutral+1),
      setCounter(counter+1),
      setSum(sum+0)
    )
  }
  const voteBad = () => {
    return (
      setBad(bad+1),
      setCounter(counter+1),
      setSum(sum-1)
    )

  }
  const resetCounter = () =>{
    return (
      setGood(0),
      setBad(0),
      setNeutral(0),
      setCounter(0),
      setSum(0),
      setPositive(0)
    )
  }

标签： reactjs

解决方案

除以 0，初始状态为counter0。

const [counter, setCounter] = useState(0)

...

const average = sum/counter;
const positivePercentage = (positive / counter * 100)

NaN虽然是一个错误的值，所以你可以在渲染时通过提供一个后备值来“保护”它们，即NaN || 0 // 0.

const positive = 0;
const counter = 0;

const positivePercentage = (positive / counter * 100);

console.log('positivePercentage', positivePercentage); // NaN

console.log('safe positivePercentage', positivePercentage || 0); // 0

推荐阅读