React中排序后状态变量未触发组件重渲染问题排查

问题描述 #

在React中实现可排序表格时，使用useState存储表格数据数组，点击表头触发排序并更新状态后，表格未展示排序效果。简化代码如下：

import { useState, useEffect } from 'react';

function App() {

  type Entry = {
    id: number;
    name: string;
  };

  const [collection, setCollection] = useState<Entry[]>([]);

  useEffect(()=> {
    // 初始化测试数据
    setCollection([{id:1, name:"Ben"}, {id:2, name:"John"}, {id:3, name:"Anna"}])
  }, [])

  const byName = (a: Entry, b: Entry) => {
    let x = a.name.toLowerCase();
    let y = b.name.toLowerCase();
    if (x < y) {return -1;}
    if (x > y) {return 1;}
    return 0;
  }

  return (
    <div>
      <table>
        <tr id="head">
          <th>Id</th>
          <th onClick={() => setCollection(collection.sort(byName))}>Name</th>
        </tr>
        {collection.map((val, index) => 
          <tr id={index.toString()}>
            <td>{val.id}</td>
            <td>{val.name}</td>
          </tr>
        )}
      </table>
    </div>
  );
}

问题原因 #

核心问题在于Array.sort()是原地排序方法，它会直接修改原数组的元素顺序，而不会返回新数组。React的useState判断状态是否需要更新时，是通过比较新旧状态的引用是否相同来决定的。因为你直接把原数组（引用未发生变化）传给了setCollection，React认为状态没有改变，所以不会触发组件重渲染，表格也就不会更新排序结果。

解决方案 #

需要先创建原数组的副本，再对副本进行排序，确保传给setCollection的是一个新的数组引用：

方法1：使用扩展运算符创建副本 #

修改表头的点击事件代码：

<th onClick={() => setCollection([...collection].sort(byName))}>Name</th>

方法2：使用slice()创建副本 #

slice()不传参数时会返回原数组的浅拷贝：

<th onClick={() => setCollection(collection.slice().sort(byName))}>Name</th>

这样处理后，每次排序都会生成新数组，React检测到状态引用变化，就会触发组件重渲染，表格就能正确展示排序后的内容。

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