React useState数组更新时新值覆盖旧值问题排查

该异常和Redux无关，是useState状态更新逻辑写法错误导致的：

• React中useState返回的setter方法执行时，会直接用传入的新值完整替换原有state，不会自动合并数组、对象这类引用类型的旧内容。
• 原代码里setList([id])每次传入的都是仅包含当前传入id的全新单元素数组，执行后自然会覆盖掉之前存储的所有数组内容。

往state数组追加元素时，需要手动把旧数组的内容和新元素拼接成新数组再传入setter，推荐两种标准写法：

基础写法 #

适合普通同步调用场景，直接展开原有数组后追加新元素：

const [list, setList] = useState([])
const addList = (id) => {
    setList([...list, id])
}

函数式更新写法（推荐） #

如果addList会在异步回调、定时器等闭包场景下调用，优先用函数式更新，能保证始终拿到最新的state值，避免闭包缓存旧state导致的数据丢失问题：

const [list, setList] = useState([])
const addList = (id) => {
    setList(prevList => [...prevList, id])
}

补充：如果需要把新元素插入到数组头部，调整新元素和展开运算符的顺序即可，写法为setList(prevList => [id, ...prevList])

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