React中如何合并新旧数组状态且不丢失旧状态？

问题分析 #

你遇到的旧状态被覆盖问题，大概率是闭包陷阱导致的：当在异步操作（比如接口请求、定时器）或者连续多次更新状态时，直接引用lessons变量会拿到闭包中的旧状态值，导致合并后的状态不是基于最新值生成的。

解决方案 #

改用setState的函数式更新写法，它会接收当前最新的状态作为参数，确保每次合并都基于最新的旧状态：

const [lessons, setLessons] = useState([''])
// 替换原来的直接赋值写法
setLessons(prevLessons => [...prevLessons, ...lessons2])

额外检查点 #

• 确认lessons2确实是你需要合并的新数组，避免它被意外赋值为覆盖性内容（比如空数组、和旧状态重复的数组）
• 如果初始的空字符串['']不是业务需要，可以改成useState([])，避免合并后多出不必要的空元素

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