React Native/React 旧状态更新不触发重渲染的解决方案问询

你给出的代码失效的核心原因是：React 对状态的更新判断采用浅比较逻辑，而数组、对象属于引用类型，你直接把images赋值给oldImages时，只是复制了数组的内存引用，两者指向同一个数组实例，调用push方法修改的还是原数组，引用地址没有变化，React 就会认为状态没有发生变更，自然不会触发重渲染。

• 方案1：直接创建新数组传入状态更新函数（适用简单场景）
  直接用扩展运算符生成新数组，不需要修改原状态，示例代码如下：

  const addImage = async (data) => {
    setImages([
      ...images,
      {
        url: data,
        order: images.length + 1
      }
    ])
  }
  

• 方案2：使用函数式更新（更推荐，尤其依赖前序状态/异步场景）
  状态更新函数传入回调时，回调的第一个参数永远是最新的前序状态，可以避免闭包导致的旧状态陷阱，示例代码如下：

  const addImage = async (data) => {
    setImages(prevImages => [
      ...prevImages,
      {
        url: data,
        order: prevImages.length + 1
      }
    ])
  }
  

• 方案3：复杂嵌套结构的状态更新
  如果是多层嵌套的对象/数组，可以先做深拷贝再修改后赋值，简单场景可以用structuredClone做结构化克隆，避免修改原引用：

  const addImage = async (data) => {
    // 深拷贝得到全新的数组实例
    const newImages = structuredClone(images)
    newImages.push({
      url: data,
      order: newImages.length + 1
    })
    setImages(newImages)
  }
  

所有 React 状态更新都要遵循不可变性原则，永远不要直接修改原状态的值，始终传入全新的引用值给状态更新函数，才能保证浅比较逻辑正常识别状态变更。

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