React点击收藏按钮更新state后列表未触发重渲染问题求解

问题根因 #

React 状态更新时会对引用类型做浅比较，如果传入的新值和旧值引用地址完全相同，React 会判定状态未发生变更，跳过组件重渲染。

你的代码中let newFavorites = favorites是直接将原状态数组的引用赋值给新变量，后续push操作是直接修改原数组，数组本身的引用地址没有发生变化，因此setFavorites传入的还是原数组，无法触发重渲染。你在控制台能看到数组内容变化，是因为你修改了原数组的内部内容，但React不会监听引用类型内部的属性变更。

修复方案 #

将状态作为不可变值处理，每次更新都返回全新的数组对象即可，推荐写法如下：

import React, { useState } from 'react';
import './App.css';

function App() {
    const [favorites, setFavorites] = useState([]);

    function addFavorite(name, id) {
        const newFav = {name, id};
        // 函数式更新+展开运算符，既避免闭包问题，也生成了全新数组
        setFavorites(prev => [...prev, newFav]);
    }

    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;

其他可选写法 #

• 用concat方法生成新数组：setFavorites(favorites.concat({name, id}))
• 先复制原数组再添加元素：

  const newFavorites = [...favorites]
  newFavorites.push({name, id})
  setFavorites(newFavorites)
  

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