React函数式setState中props.increment返回NaN问题排查

咱们一步一步拆解这个问题，你遇到的情况很典型，通常是这几个原因导致的：

1. 父组件传入的increment类型不对（或本身就是NaN） #

你说“硬编码传入increment={1}”，但有没有可能是笔误？比如写成了increment={"1"}（字符串类型的1）或者increment={someUndefinedVar}？如果是字符串"1"，state.counter + "1"会变成字符串拼接（比如0+"1"="01"），但如果是undefined或者NaN，那0 + undefined/NaN就会得到NaN——而且NaN和任何数运算结果都是NaN，之后每次更新都会保持这个错误状态。

另外，也可以检查父组件里的increment是不是来自某个未初始化的状态或者错误计算的结果：比如父组件里写了state = { increment: NaN }，再把这个状态传下去，那不管你怎么调用setState，拿到的都是NaN。

2. Studentinfo组件初始化时increment props未定义 #

如果你的Studentinfo组件在父组件里是条件渲染的，或者父组件是异步获取数据后才传入increment，那组件第一次挂载时props.increment可能是undefined。这时候第一次调用setState时，state.counter + undefined就会得到NaN，之后哪怕props.increment变成了1，NaN + 1还是NaN，状态就一直卡着了。

比如父组件一开始没传increment，后来某个操作后才加上increment={1}，但第一次setState已经把counter弄成NaN了，后续更新也救不回来。

3. 组件的state.counter初始值不是数字 #

如果你的Studentinfo组件里counter的初始状态不是数字类型——比如state = { counter: '' }或者state = { counter: undefined }，那哪怕props.increment是1，undefined + 1也会得到NaN。不过你说替换成具体数值9000就正常，大概率初始值是没问题的，但还是可以快速确认一下。

排查和解决办法 #

• 先打log确认props：在updateStudentHandler里第一行加console.log('当前props.increment:', props.increment, typeof props.increment)，看看实际拿到的是什么值和类型，这是最快定位问题的方法。
• 给props加默认值兜底：在Studentinfo组件里给increment加默认值，比如类组件可以写：

  Studentinfo.defaultProps = {
    increment: 1
  }
  

  如果是函数组件，直接用ES6默认参数：const Studentinfo = ({ increment = 1 }) => {...}，防止undefined的情况。
• 修复NaN的状态逻辑：如果counter已经变成NaN了，在setState里可以加个类型判断，避免错误扩散：

  this.setState((state, props) => ({
    counter: typeof state.counter === 'number' && typeof props.increment === 'number' 
      ? state.counter + props.increment 
      : (props.increment || 1)
  }))
  

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