React中数组求和首次返回0的问题排查

嘿，这个问题我太熟啦——你遇到的是React类组件里setState的异步更新机制导致的！

为什么会出现这种延迟？ #

当你在handleSubmit里调用this.setState时，React并不会立刻更新this.state，而是把更新请求放进队列，等合适的时机批量处理。所以你紧接着就去读取this.state.sum，拿到的其实是更新前的旧值：

• 第一次提交时，sum初始是空数组，reduce计算结果就是0；
• 第二次提交时，sum里才刚存上第一次输入的数值，所以计算出的是第一个数的总和。

怎么修复？ #

我们可以换个思路：先计算好要更新的新数据，再一次性更新state，同时直接用新数据计算总和，完全不用依赖还没更新的this.state。

修改后的handleSubmit代码如下：

handleSubmit(e) {
  e.preventDefault();
  // 先把输入的字符串转成数字，避免后续重复处理
  const newNumber = Number(this.state.number);
  // 生成新的数组（其实donated和sum内容完全一致，可以合并成一个state哦）
  const newDonated = [...this.state.donated, newNumber];
  const newSum = [...newDonated];
  // 直接用新数组计算总和
  const total = newSum.reduce((a, b) => a + b, 0);

  // 一次性更新所有需要修改的state
  this.setState({
    donated: newDonated,
    sum: newSum,
    total: total
  }, () => {
    // 回调会在state更新完成后执行，这里可以放心打印最新值
    console.log('DONATED', this.state.donated);
    console.log('SUM', this.state.sum);
    console.log('CALC', total);
  });

  document.forms['id_form'].reset();
}

额外优化建议 #

• 你的donated和sum数组内容完全一致，没必要存两个，只保留donated就够了，计算总和时直接用this.state.donated.reduce(...)，减少冗余状态；
• 如果需要基于上一次的state来更新（比如数组追加元素），也可以用setState的函数式写法，更安全：

  this.setState(prevState => {
    const newDonated = [...prevState.donated, newNumber];
    return {
      donated: newDonated,
      total: newDonated.reduce((a,b) => a+b, 0)
    };
  });
  

这样修改后，每次提交就能立刻得到正确的总和啦！

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