React Native：应用刷新时基于旧值更新状态的异常问题

核心问题拆解与解答 #

1. 刷新模拟器后状态仍保留的原因 #

React Native模拟器（以及部分前端开发环境）默认启用了热重载/状态持久化机制，该机制会在刷新页面时保留组件的当前状态，而非完全重置为初始值。也就是说，你每次刷新时，组件的状态是基于上一次运行结束时的数组继续操作，而非回到初始的[1, 2]。

2. 状态未基于初始数组更新的原因 #

你的useEffect依赖数组为空[]，原本只会在组件首次挂载时执行一次。但由于状态被持久化，组件并没有真正触发"重新挂载"逻辑——环境保留了之前的状态快照，所以每次刷新时，useEffect执行时的prevValues是上一次刷新后的数组，而非初始值。多次刷新后，就会不断重复追加newData，最终出现多组[3,4]的结果。

3. useEffect写法是否错误？ #

函数式更新的写法本身是正确的：

setArray((prevValues) => [...prevValues, ...newData]);

这种写法能确保基于最新的状态值进行更新，避免闭包导致的状态过期问题。问题并不出在写法上，而是你对开发环境的状态持久化行为不了解，导致预期和实际结果不符。

验证与解决方法 #

• 完全重启应用（而非仅刷新模拟器），或关闭热重载/状态持久化功能，此时状态会重置为初始的[1, 2]，useEffect执行一次后得到预期的[1, 2, 3, 4]。
• 如果需要每次刷新都强制使用初始值更新，可以直接在setArray中使用固定初始值：

  setArray([1, 2, ...newData]);
  

  但这种写法仅适用于不需要保留中间状态的场景。

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