React useState中为何需用扩展运算符返回数组状态？

你的疑惑核心在于React状态更新的不可变性原则和引用类型的判断逻辑，下面拆解清楚：

• React靠引用变化识别状态更新
  数组是引用类型，当你直接修改原数组（比如用expenses1.push(expenseData)），数组的内存引用并没有改变。如果直接return这个原数组，React对比前后状态时会发现引用完全一致，会判定状态没有发生变化，不会触发组件重新渲染——这就导致你新增的expense数据不会显示在UI上。

• 返回新数组的作用
  [...expenses1]通过扩展运算符创建了一个全新的数组，这个新数组和原数组的内存引用完全不同。React检测到引用变化后，就会认定状态已更新，触发组件重新渲染，子组件Expenses就能拿到包含新数据的数组，完成UI更新。

另外要纠正你代码里的一个问题：不要直接修改prevState。你在回调里执行expenses1.push(expenseData)已经违反了React的不可变性原则，虽然最后返回了新数组，但直接修改原状态可能会引发一些隐蔽的bug（比如其他依赖该状态的逻辑拿到的是被修改后的旧状态）。正确的写法应该是直接创建包含新数据的新数组，不需要修改原数组：

setListOfExpenses((expenses1) => {
  return [...expenses1, expenseData];
});

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