React Native中useState更新数组两种写法效果差异原因咨询

你用到的状态定义代码如下：

export interface Location{
    latitude: number;
    longitude: number;
}

const [routeLines, setRouteLines] = useState<Location[]>([]);

核心差异 #

两种更新逻辑的本质区别是获取上一个状态的来源不同：

• 直接传值写法 setRouteLines([...routeLines, location])
  这里用到的routeLines是当前组件渲染周期形成的闭包里捕获的固定值，React不会在同一次渲染周期里同步更新这个值。如果短时间内连续触发多次更新，或者更新逻辑在定时器、事件监听、异步回调这类闭包环境里执行，你拿到的永远是渲染时的旧状态，后续的更新会覆盖前面的计算结果，最终和预期效果不符。
  举个实际场景：连续触发3次追加点位的操作，每次执行时拿到的routeLines都是初始空数组，最后存到状态里的永远只有最后一次追加的单个点位，之前加的点位全部丢失，表现出来就是更新不生效。
• 函数式更新写法 setRouteLines(routes => [...routes, location])
  函数参数里的routes是React内部维护的、经过所有前置更新计算后的最新状态值，完全不依赖当前闭包的旧变量。不管你在什么上下文里触发更新、连续触发多少次，每一次更新都能拿到上一次计算完成的准确状态，不会出现更新覆盖的问题。

直接传值失效的常见原因 #

你遇到的直接传值不生效问题，基本都是闭包捕获旧值导致的：

路线点位追加一般是在定位回调、地图事件监听这类连续触发的异步场景里执行，这类回调里拿到的routeLines往往是组件初次挂载时的空数组，每次执行都相当于把新点位放到空数组里回写，之前追加的所有点位都会被覆盖，看起来就像更新完全没起作用。

选型规则 #

• 只要新状态需要基于旧状态计算（比如数组追加、数值增减、对象属性修改），一律用函数式更新，从根源规避闭包旧值问题
• 只有当你给状态设置一个和旧值完全无关的固定值时，才用直接传值写法，比如重置路线时直接写setRouteLines([])即可。

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