React中使用useState更新数组：带箭头函数与不带箭头函数的写法差异

数据老陈

2026-4-30

两种React数组状态更新方式的差异详解

嘿，这个问题问得太到位了——我刚上手React的时候也纠结过这俩写法，踩过好几次坑！下面用大白话给你掰扯清楚它们的核心区别：

先搞懂两种写法的本质

setMyArray([...myArray, value]);

这种写法是直接拿你当前代码里能访问到的myArray值，把它展开后加上新值，再传给setMyArray。听起来没问题，但它有个致命前提：你拿到的myArray必须是最新的状态值。

setMyArray(myArray => [...myArray, value]);

这种写法是给setMyArray传了一个函数，React会在真正执行状态更新的时候，把当前最新的数组状态作为参数传给这个函数，你基于这个最新值去生成新数组就行。

最关键的区别在于：React的状态更新有时候是异步批量的，这时候方法1会“拿错”旧值，而方法2永远能拿到最新值。

举个最常见的坑例子：连续两次添加值

// 用方法1的情况
const handleAddTwice = () => {
  setMyArray([...myArray, '苹果']);
  setMyArray([...myArray, '香蕉']);
};

你以为点击后数组会变成[旧数组内容, '苹果', '香蕉']？错！最后只会是[旧数组内容, '香蕉']。因为React在合成事件（比如onClick）里会批量处理状态更新，两次调用setMyArray的时候，myArray还是更新前的旧值，第二次的更新直接覆盖了第一次的。

但换成方法2就不一样了：

// 用方法2的情况
const handleAddTwice = () => {
  setMyArray(arr => [...arr, '苹果']);
  setMyArray(arr => [...arr, '香蕉']);
};

这时候React会先把第一个更新的函数放进队列，等处理的时候，把最新的数组传给第一个函数，得到加了苹果的新数组；然后处理第二个函数时，再把这个加了苹果的新数组传进去，最后就得到了同时有苹果和香蕉的数组。

如果你的状态更新只依赖一次当前值，而且确定不会有连续更新的情况，方法1用起来没问题；
但只要你的更新是连续多次的，或者依赖之前的状态值（比如累加、删除、过滤后更新），一定要用方法2的函数式更新，这是最稳妥的写法，不管React是同步还是异步更新状态，都不会出错。

简单说：方法2是“保险款”，方法1是“简易款”，保险款永远不会掉链子～

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