React中使用扩展运算符与状态合并数组时新增项被覆盖问题

你的判断有点偏差，核心问题不是let newBooks = [{title, author, rating}]这行，而是每次添加新项时，你都基于原始的FAVOURITE_BOOKS数组来拼接新内容，而非当前已经更新后的books状态数组。

举个例子：假设FAVOURITE_BOOKS初始有3本书，第一次添加1本，allBooks变成原始3本+新1本=4本；但第二次添加时，你又拿原始3本+新1本，结果还是4本，之前添加的那本直接被覆盖了。

修复代码 #

改成用React的函数式状态更新，这样每次都能基于当前最新的books状态来添加新项：

const addBookToList = () => {
  // 用prevBooks获取当前最新的books状态
  setBooks(prevBooks => [...prevBooks, {title, author, rating}])

  setTitle("")
  setAuthor("")
  setRating("")
}

为什么这样有效？ #

React的状态更新是异步的，使用函数式更新（给setBooks传一个函数）能确保我们拿到的prevBooks是当前最新的状态值。这样每次添加新项时，都是在已有的列表基础上追加，而非从头重置列表。

如果还是想保留类似newBooks的写法，也可以这么改：

const addBookToList = () => {
  const newBook = {title, author, rating}
  setBooks(prevBooks => [...prevBooks, newBook])

  setTitle("")
  setAuthor("")
  setRating("")
}

内容的提问来源于stack exchange，提问作者Clay.jpg