React Native更新useState数组组件不重渲染、状态滞后问题

你遇到的更新「滞后1项」不是数组更新写法的语法错误，本质是对React函数组件的state更新机制理解有偏差：

• 函数组件里每一次渲染对应的state都是固定常量，调用set方法触发的是异步的重渲染流程，不会同步修改当前渲染周期内的state变量。
• 你在调用setCurrentNumber之后立刻打印currentNumber，拿到的永远是当前渲染周期的旧值，必须等组件完成重渲染，新的渲染周期里的currentNumber才会是更新后的值，看起来就像慢了一拍。

你贴的两种写法都符合不可变更新要求，都能正确触发组件重渲染，但适用场景有区别：

• 第一种函数式更新写法 setCurrentNumber(currentNumber => [...currentNumber, number]) 是官方推荐写法：更新时传入的函数能保证拿到链式更新中最新的前序状态，不会因为闭包缓存了旧state导致丢更新，适合连续触发更新、更新逻辑包裹在useCallback/useEffect闭包中的场景。
• 第二种先拷贝再push的写法语法上没有问题，但存在闭包陷阱风险：如果短时间内连续触发两次numberAppended，第二次执行时拿到的currentNumber还是第一次更新前的旧值，会导致第一次追加的元素被覆盖；如果函数被useCallback缓存且未正确设置依赖，也会出现拿到旧state的问题。

要达到类组件componentDidUpdate的效果，也就是state更新完成后拿到最新值执行后续逻辑，用以下标准方案：

1. 用useEffect监听目标state变化
   这是函数组件中监听state更新的官方实现，只要依赖的state发生变化、组件完成重渲染后，useEffect的回调就会执行，此时拿到的是最新的state值：

const [currentNumber, setCurrentNumber] = useState<string[]>([]);

// 监听currentNumber变化，等价于componentDidUpdate中判断currentNumber更新的逻辑
useEffect(() => {
  console.log('数组最新值：', currentNumber);
  // 此处写所有依赖最新数组值的业务逻辑
}, [currentNumber]);

const numberAppended = (number: string) => {
  // 优先用函数式更新避免闭包问题
  setCurrentNumber(prev => [...prev, number]);
}

2. 如果是更新后需要立刻用到新值做同步计算，直接使用你构造出的新数组即可，不需要等state更新完成，比如第二种写法里的newCurrentNumber就是你要的最新值，set调用后可以直接使用这个变量做后续计算。

如果按照上述写法后页面仍然没有同步显示最新数组内容，优先排查以下问题：

• 是否存在直接修改原state数组的操作：比如直接写currentNumber.push(number)后把原数组传给set方法，此时数组引用没有变化，React会跳过更新，必须创建新数组传入set方法。
• 是否给子组件传递数组时做了错误的memo缓存，导致子组件没有收到最新props。

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