React.JS中如何使用useState用新数组完全替换原有数组

useState 的更新函数本来就支持直接传入新状态值，全量替换旧值。你之前搜到的给数组新增元素的写法，只是数组更新的其中一种场景，不是说useState只能往数组里加东西。

你贴的新数组示例有个语法错误：外层多套了一层没用的大括号{}，如果你的状态是数组类型，直接传数组本身就行，不用额外包成对象。

代码示例 #

首先是常规的初始化写法：

const [todos, setTodos] = useState([
  { id: 1, title: 'take out trash', done: false },
  { id: 2, title: 'wife to dinner', done: false },
  { id: 3, title: 'make react app', done: false }
])

要替换成全新数组的时候，直接把新数组传给setTodos就可以，旧数组会被完全覆盖：

// 你要替换的新数组，去掉外层多余的大括号
const newTodos = [
  { id: 5, title: 'X', done: true },
  { id: 8, title: 'Y', done: true },
  { id: 9, title: 'Z', done: true }
]

// 直接传入新数组完成替换
setTodos(newTodos)

如果你更新数组的时候需要用到旧数组的值，就用函数式更新的写法，避免闭包拿到过期的旧状态：

setTodos(prevTodos => {
  // 这里可以读取旧的prevTodos做逻辑计算
  // 最终返回的值会作为新状态，完全替换旧值
  return newTodos
})

有个需要注意的点：不要直接在原数组上用push、splice这类方法修改后再回传，React是靠状态的引用变化判断要不要重渲染的，直接改原数组不会触发视图更新，必须传一个新的数组引用。

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