React调用setState更新数组时从第二次开始重复追加相同元素原因问询

问题原因说明 #

你遇到的重复问题是违反React状态不可变性原则 + React严格模式的开发校验机制共同导致的，核心逻辑如下：

1. React要求所有状态必须作为不可变值处理，不能直接修改状态本身，数组的push方法是会直接修改原数组的变异方法，你在旧代码的状态更新函数里直接调用prevTweets.push(newTweet)，已经修改了原本的状态数组，属于不符合规范的写法。
2. React 18及以上版本在开发环境开启严格模式（<StrictMode>）时，为了帮开发者排查非纯函数的问题，会故意将状态更新函数执行两次。旧代码的更新函数不是纯函数：第一次执行时已经把新推文push到了原prevTweets数组中，第二次执行时拿到的已经是被修改过的数组，会再push一次相同的新推文，最终返回的数组就会出现重复项。
3. 你修改后的写法是符合规范的：全程没有修改原prevTweets数组，直接基于原数组扩展生成全新的数组返回，就算更新函数执行两次，两次拿到的都是原始的状态数组，返回的结果完全一致，自然不会出现重复。

另外补充：这个问题只会在开发环境出现，生产环境下严格模式不会触发更新函数的双重执行，所以旧代码在生产环境可能不会暴露问题，但违反不可变性原则的写法始终存在隐患，可能引发其他不可预期的状态异常。

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