React更新数组对象状态后界面无变化，求原因及解决方法

核心问题是React的useState依赖不可变更新触发重渲染——你直接修改原数组或数组内的对象时，数组的引用没有发生变化，React会认为状态没更新，所以界面不会刷新。

常见错误写法（直接修改原状态） #

const [books, setBooks] = useState([
  { id: 1, title: 'React入门', rating: 3 },
  { id: 2, title: '前端进阶', rating: 4 }
]);

const handleRate = (bookId, newRating) => {
  // 错误：直接修改原数组中的对象，引用未变
  const targetBook = books.find(b => b.id === bookId);
  targetBook.rating = newRating;
  // 错误：传递原数组引用，React检测不到变化
  setBooks(books);
};

正确的不可变更新写法 #

方法1：使用map生成新数组（推荐，简洁高效）

通过map返回一个新数组，对目标书籍创建新对象并修改评分，其他书籍保持原引用：

const handleRate = (bookId, newRating) => {
  setBooks(prevBooks => 
    prevBooks.map(book => 
      book.id === bookId ? { ...book, rating: newRating } : book
    )
  );
};

这里用函数式更新（prevBooks）是更稳妥的写法，能确保拿到最新的状态值，避免因状态异步更新导致的问题。

方法2：复制数组后替换目标对象（适合复杂操作）

先复制原数组得到新引用，再创建新的书籍对象替换原对象：

const handleRate = (bookId, newRating) => {
  // 复制原数组，生成新引用
  const updatedBooks = [...books];
  const bookIndex = updatedBooks.findIndex(b => b.id === bookId);
  
  if (bookIndex !== -1) {
    // 创建新对象替换原对象，保证不可变性
    updatedBooks[bookIndex] = { ...updatedBooks[bookIndex], rating: newRating };
    setBooks(updatedBooks);
  }
};

注意：绝对不能直接修改updatedBooks[bookIndex].rating，因为复制的数组里的对象还是原引用，必须创建新对象替换。

关键总结 #

永远不要直接修改useState管理的状态值（数组、对象都是如此），必须返回新的引用（新数组、新对象），这样React才能感知到状态变化，触发界面重渲染。

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