React Native中useState首次更新数组状态不生效问题咨询

你遇到的更新丢失问题核心是两个React状态机制的常见误区，对象/哈希类型状态更新异常也是完全相同的原因：

• 闭包捕获旧状态：React的状态更新是异步批处理的，触发setState后状态不会立刻同步修改，你在事件回调里拿到的images永远是当前回调函数创建时，闭包绑定的那次渲染的旧值。如果点击按钮的速度快于组件重渲染、重新绑定新闭包的速度，连续触发的回调拿到的都是过期的旧状态，自然会出现少加、漏加的情况——点5次出4个、点1次没内容都是这个原因，你在else分支传给changeFunction的images也永远是旧值，不会包含刚追加的URI。
• 状态类型不统一+判断逻辑错误：你给数组类型的状态初始值设为false属于类型错位，后续用!images判断是否为空本身就有问题：空数组[]在JS里是真值，你之前试useState([])的时候，第一次进回调![]返回false，直接走else分支，和你写的判断逻辑不匹配，自然跑不通。

按照下面的写法改就能彻底解决问题：

• 首先统一状态初始化类型，数组状态就用空数组做初始值，不要混用布尔值：

const [images, setImages] = useState([])

• 所有依赖上一次状态做更新的逻辑，一律用函数式更新写法，不要直接用闭包里捕获的状态变量，这种写法能保证你拿到的永远是上一次渲染后的最新状态，完全规避闭包旧值问题：

const handleClickTakePicture = async () => {
  const r = await takePhoto()
  if (!r.cancelled) {
    setImages(prevImages => {
      // prevImages是React保证的最新状态，不会有闭包过期问题
      const newImages = [...prevImages, r.uri]
      // 把最新的数组同步传给关联方法，不要用外层闭包的旧images
      changeFunction(prevChangeValue => ({
        ...prevChangeValue,
        specific_pictures: newImages
      }))
      return newImages
    })
  }
}

• 你之前写的if (!images)分支完全是多余的，空数组展开后追加元素本身就是合法操作，不需要单独判断初始空值场景
• 不要在setState调用之后，立刻在外层代码里读刚设置的状态，此时状态还没更新，必然拿到旧值。如果要基于更新后的状态做后续逻辑，要么写在函数式更新的回调里，要么用useEffect监听对应状态变化再触发
• 所有数组、对象这类引用类型的状态更新，只要是基于旧值修改，都建议用函数式更新写法，从根源上避免更新覆盖、值丢失的问题。

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