反应应用程序在按钮尚未单击时显示 NaN

Question

因此，当我学习并尝试做简单的反馈应用程序时，当用户尚未选择任何选项时，平均值和正百分比将显示 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)
)
}

Answer 1

除以 0，counter的初始状态为 0。

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