如何在React useState数组中存储新值且不删除之前的旧值

问题原因 #

• 状态更新函数名拼写错误：你定义的状态对应更新方法为 setTableDataList，但实际调用的是不存在的 setTtableDataDetail，状态没有被正确更新，后续渲染时拿到的始终是初始空数组，看起来就像旧值被清空。
• 闭包快照问题：当状态更新依赖前一次的状态值时，直接读取当前作用域内的状态变量，拿到的是本次渲染的快照值，频繁触发更新时容易出现旧值覆盖的问题。

修正方案 #

直接使用函数式更新写法即可，不需要额外声明中间变量：

const [tableDataList, setTableDataList] = useState([]);

const getTableDataDetail = (value) => {
    // 函数式更新的入参prev为状态的最新值，不受闭包影响
    setTableDataList(prev => [...prev, ...value])
};

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