React状态变更后组件未重渲染？Todo收藏排序问题排查

我正在开发一款Todo应用，要实现将标记为favorite: true的待办项排在数组首位的收藏功能，但遇到了异常：点击收藏按钮后，控制台显示favorite: true的项已排在数组首位，但todos.map并未渲染出该排序变化。

相关代码如下：

组件内的排序与收藏处理代码 #

useEffect(() => {
    // 将favorite为true的项排在前面
    setTodos(todos.sort((x, y) => Number(y.favorite) - Number(x.favorite)));
  }, [todos]);

// 收藏切换函数
const favoriteHandler = () => {
    setTodos(
      todos.map((e) => {
        if (e.id === id) {
          return {
            ...e,
            favorite: e.favorite,
          };
        }
        return e;
      })
    );
  };

// 收藏按钮渲染
<div className="favorite-button" onClick={() => favoriteHandler()}>
          {favorite ? (
            <img src={FavoriteFilledIcon} alt="取消收藏" />
          ) : (
            <img src={FavoriteIcon} alt="添加收藏" />
          )}
        </div>

App.js中的渲染代码 #

// App.js
{todos.map((e, i) => (
          <TodoItem
            completed={e.completed}
            id={e.id}
            key={i}
            text={e.name}
            setTodos={setTodos}
            todos={todos}
            favorite={e.favorite}
          />
        ))}

问题根源 #

1. 收藏状态未实际修改
   favoriteHandler里返回的favorite: e.favorite完全没改变该项的收藏状态，点击按钮等于无效操作，控制台看到的排序变化大概率是旧数据干扰。

2. 原地排序导致React未识别状态变更
   Array.sort()是原地修改数组的方法，直接用setTodos(todos.sort(...))时，传给状态的还是原数组的引用，React会判定状态未变化，可能不触发重新渲染。

3. 索引作为key导致排序后渲染异常
   列表渲染用key={i}，当数组顺序改变时，React会复用原有组件实例（因为索引对应的位置没变化），不会重新排序渲染，视觉上就看不到顺序更新。

修复步骤 #

1. 正确切换收藏状态 #

修改favoriteHandler，对目标项的favorite值取反，同时使用函数式更新避免闭包问题：

const favoriteHandler = () => {
  setTodos(prevTodos => 
    prevTodos.map(e => {
      if (e.id === id) {
        return {
          ...e,
          favorite: !e.favorite // 实现收藏/取消收藏的切换
        };
      }
      return e;
    })
  );
};

2. 避免原地排序，生成新数组 #

排序时先复制原数组，再对新数组排序，确保状态引用变化：

useEffect(() => {
  const sortedTodos = [...todos].sort((x, y) => Number(y.favorite) - Number(x.favorite));
  setTodos(sortedTodos);
}, [todos]);

更优的做法是直接在渲染时使用排序后的数组，避免useEffect可能引发的循环：

// 渲染前生成排序后的新数组
const sortedTodos = [...todos].sort((x, y) => Number(y.favorite) - Number(x.favorite));

// 渲染sortedTodos而非原todos
{sortedTodos.map((e) => (
  <TodoItem
    completed={e.completed}
    id={e.id}
    key={e.id}
    text={e.name}
    setTodos={setTodos}
    todos={todos}
    favorite={e.favorite}
  />
))}

3. 使用唯一ID作为列表key #

将key={i}替换为key={e.id}，让React能正确识别每个待办项，排序后正常更新渲染：

// App.js中修改key属性
{sortedTodos.map((e) => (
  <TodoItem
    completed={e.completed}
    id={e.id}
    key={e.id} // 使用待办项的唯一ID
    text={e.name}
    setTodos={setTodos}
    todos={todos}
    favorite={e.favorite}
  />
))}

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