我很难理解为什么React中的列表不会更新。对于我正在构建的网站，我试图添加一个"收藏夹"按钮，但当你单击该按钮时，它会更新状态，但更改永远不会在列表中重新呈现。我试着制作一个更简单的版本，但这也不起作用：
import React, { useState } from 'react';
import './App.css';
function App() {
const [favorites, setFavorites] = useState([]);
function addFavorite(name, id) {
let newFavorites = favorites;
let newFav = {name: name, id: id};
newFavorites.push(newFav);
setFavorites(newFavorites);
}
return (
<div className="App">
<ul>
{favorites.map((val) => {
return(<li key={val.id}><span>{val.name}</span></li>);
})}
</ul>
<button onClick={() => addFavorite("Thing1", 1)}>Thing 1</button>
<button onClick={() => addFavorite("Thing2", 2)}>Thing 2</button>
<button onClick={() => {console.log(favorites)}}>Check</button>
</div>
);
}
export default App;
当我记录它们时，我可以在控制台中看到状态的变化，但<ul>元素永远不会更新。我在网上看了看，但我发现的大多数文章都没有太大帮助(我觉得我写的示例代码看起来很像这篇文章
let newFavorites = favorites;
这将指定newFavorites指向收藏夹
newFavorites.push(newFav);
因为newFavorites指向favorites，这是state中的一个数组，所以不能将任何内容推到它上面并进行更改渲染。
您需要做的是用收藏夹的内容填充一个新的数组newFavorites。
尝试
const newFavorites = [...favorites];
应该可以
我会对您的addFavourite函数进行一些更改：
函数addFavorite(name，id){让newFav=｛name，id｝；
setFavorites([…favourites, newFav]);
}
这样，每次单击收藏夹时，都可以确保使用排列运算符创建新阵列
它不起作用，因为使用正在改变现有状态。列表正在更新，但它不会渲染为useState，只有当传递给它的参数与上一个不同时才会渲染，但在您的情况下，尽管您正在更改列表项，但引用仍然没有更改。
为了使其工作，您可以对偶数数组的列表使用spread运算符。concat()返回一个新的更新数组。
function addFavorite(name, id) {
let newFav = {name: name, id: id};
setFavorites(prev=>[...prev, newFav]);
}要更改数组状态，应该使用：
function addFavorite(name, id) {
let newFav = { name: name, id: id };
setFavorites((favorites) => [...favorites, newFav]);
}