React使用setState hook如何更新state对象内数组指定元素的属性

你可以通过不可变更新的方式结合展开语法完成状态修改，推荐使用函数式更新写法保证获取到最新的状态值，具体实现代码如下：

setOrganisations(prev => {
  // 浅拷贝原items数组
  const newItems = [...prev.items];
  // 浅拷贝下标为1的对象，更新isInternal属性
  newItems[1] = {
    ...newItems[1],
    isInternal: true
  };
  // 返回全新的状态对象，保留hasMore原值
  return {
    ...prev,
    items: newItems
  };
})

如果需要更精简的写法，也可以直接通过数组切片的方式完成更新：

setOrganisations(prev => ({
  ...prev,
  items: [
    ...prev.items.slice(0, 1),
    { ...prev.items[1], isInternal: true },
    ...prev.items.slice(2)
  ]
}))

注意要点 #

• 所有修改都要基于浅拷贝完成，不能直接修改原状态对象/数组，否则会导致React无法检测到状态变更，不会触发重渲染
• 优先使用函数式更新的写法，避免状态闭包导致更新异常

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