React Native中useState未触发重渲染，复制数组才生效的问题求助

嘿，作为第一个Hook组件就遇到这个问题，其实挺典型的，我来给你好好拆解一下背后的逻辑～

核心原因：React的浅比较机制 #

React中，useState判断是否需要触发重渲染，靠的是浅比较（Shallow Comparison）：

• 对于基本类型（比如数字、字符串），只要值不一样，就会认为状态更新；
• 对于引用类型（比如数组、对象），React只会比较引用地址——哪怕数组内容变了，但如果引用还是同一个，React就会觉得“状态没变化”，不会触发重渲染。

你的代码到底发生了什么？ #

react-native-camera-roll-picker的callback回调返回的imgs数组，大概率是组件内部复用的同一个数组引用：当你选择/取消图片时，组件只是修改了这个数组的元素（比如新增、删除项），但没有创建一个全新的数组。

这时候你直接调用setImages(imgs)，images状态的引用和之前完全一样，React的浅比较就判定“状态没更新”，自然不会重新渲染组件，头部的选中数量也就没法更新了。

为什么map(i => i)能解决问题？ #

map方法的特性是返回一个全新的数组——哪怕数组里的每个元素都和原数组一样，新数组的内存地址是完全不同的。这时候setImages接收了新的数组引用，React浅比较发现状态确实变了，就会触发组件重渲染，头部的“x selected”也就正常显示了。

其他可行的解决方案 #

除了用map，你还可以用这些方式创建新数组，效果是一样的：

• 使用扩展运算符：setImages([...imgs])
• 使用数组的slice方法：setImages(imgs.slice())
• 手动创建新数组：setImages(Array.from(imgs))

这些方法的核心都是让状态的引用发生变化，让React能检测到状态更新。

总结 #

这是React处理引用类型状态的通用规则，不管是Hooks还是Class组件的setState都适用：想要更新引用类型的状态，一定要传递新的引用给状态更新函数。官方文档可能因为是基础概念没有单独拿出来强调，但实际开发中遇到这种情况很常见，多踩几次坑就熟悉啦～

内容的提问来源于stack exchange，提问作者alex-k