javascript - 使用状态 React 更新列表

Question

我无法理解为什么列表不会在 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>元素永远不会更新。我在网上看过，但我发现的大多数文章都不是很有帮助(我觉得我写的示例代码看起来很像 this article 。

Answer 1

let newFavorites = favorites;

这将 newFavorites 分配为指向收藏夹

newFavorites.push(newFav);

因为 newFavorites 指向收藏夹，它是 state 中的一个数组，您不能将任何东西推到它上面并渲染该更改。
您需要做的是填充一个新数组 newFavorites与收藏夹的内容。
尝试

const newFavorites = [...favorites];

那应该工作