React JS中如何将新数据添加到state绑定表格的开头位置

你当前的写法是把新数据追加到原数组末尾，所以会渲染在表格最后，只要调整新数据在新数组中的位置即可，同时注意不要直接修改原state数组，要返回全新的数组实例触发React重渲染：

核心修改逻辑 #

你原来的更新代码应该类似这样（追加到末尾）：

// 函数组件写法
setTableData(prev => [...prev, newData])
// 类组件写法
this.setState(prev => ({ tableData: [...prev.tableData, newData] }))

只需把新数据放到展开的旧数组前面，即可插入到表格最开头：

// 函数组件写法
setTableData(prev => [newData, ...prev])
// 类组件写法
this.setState(prev => ({ tableData: [newData, ...prev.tableData] }))

注意事项 #

• 不要直接用数组的unshift方法修改原state：tableData.unshift(newData)这种写法属于直接变更原state，React无法检测到变更，不会触发视图更新。
• 如果要插入多条新数据，把多个新数据放在数组前侧展开即可：setTableData(prev => [...newDataList, ...prev])

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