React新手求助：useState计数器点击按钮后显示NaN问题

嘿，我一眼就揪出问题啦！你碰到的NaN显示问题，根源其实是props拼写错误：

你的CounterHooks组件定义的接收参数是initialCount，但在App.js里渲染组件时，你把这个props写成了intialCount（少了一个字母i）！

这就导致组件里的initialCount值是undefined，useState(undefined)会把count初始化为undefined。当你点击加减按钮时，undefined + 1或者undefined - 1的结果自然就是NaN了。

修正后的App.js代码： #

import React from 'react';
import CounterHooks from './CounterHooks'
function App() {
  console.log("Render App")
  return (
    <>
      CounterHooks
      <CounterHooks initialCount={0} /> {/* 这里把intialCount改成initialCount */}
    </>
  )
}
export default App;

额外小优化建议： #

你可以给CounterHooks的initialCount设置一个默认值，这样就算后续忘记传props或者再次写错名称，也不会出现NaN的问题：

export default function CounterHooks({initialCount = 0}) {
  const [count , setCount ] = useState(initialCount)
  // ... 其他代码保持不变
}

内容的提问来源于stack exchange，提问作者stackman