使用React Hooks如何向state对象的内部数组添加元素并保留其余属性

核心实现逻辑是：useState更新对象类型的state时，不会自动合并原有属性，需要先通过展开运算符保留所有原有属性，再覆盖需要修改的数组字段。

正确代码写法 #

setDashboard(prev => {
  // 先展开原有state，保留loading、address等所有属性
  return {
    ...prev,
    // 再展开原有data数组，追加新元素
    data: [...prev.data, newData]
  }
})

匹配你目标结构的示例代码 #

如果你要同时将address修改为xxx，且给data追加元素{id: 1, name: 'B'}，写法如下：

// 假设初始时data里已经有 {id:0, name:'A'}
setDashboard(prev => {
  return {
    ...prev,
    data: [...prev.data, {id: 1, name: 'B'}],
    address: 'xxx'
  }
})

注意事项 #

• 不要直接修改原state的属性，比如prev.data.push(newData)，会导致无法触发组件重渲染
• 如果state结构较复杂，也可以拆分出多个独立的state分别管理，简化更新逻辑：

const [loading, setLoading] = useState(true)
const [data, setData] = useState([])
const [address, setAddress] = useState('')

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