为什么React重新渲染后排序的数据没有在JSX中更新展示？

• 违反React状态不可变原则，原地修改数组
  Array.sort()属于原地排序方法，会直接修改原数组本身，返回值仍是原数组的引用。在sortHandler中直接对state中的data数组执行排序后传入setData，新旧state的引用完全一致，React的浅比较逻辑会判定状态未发生变更，默认跳过更新流程，不会触发正常重渲染。观测到的控制台打印更新是原地修改数组带来的副作用，不属于正常的状态更新响应。
• 索引作为key导致DOM复用未更新
  渲染列表时使用数组索引idx作为key属性，数组排序后元素顺序发生变化，但对应索引位置的key没有变化，React会默认复用该位置之前的DOM节点，不会重新渲染对应内容，即便数组实际内容已经变更，视觉上也看不到更新效果。
• 分页逻辑多处计算错误
  1. 切片起始索引计算错误：当前页切片起始值写为currentPage * ITEMS_PER_PAGE，第一页（currentPage=1）会直接跳过前10条数据，从第11条开始展示
  2. 总页数计算逻辑和单页条数不匹配：定义单页展示10条数据，但计算总页数时按每页50条计算，导致可切换的页码范围仅为实际总页数的1/5，排序后当前页的内容可能和之前差异不大，进一步放大了无更新的错觉。

1. 排序前先拷贝原数组，保证状态引用发生变更：

const sortHandler = () => {
    // 先展开拷贝生成新数组，再执行排序
    setData(data => [...data].sort((a, b) => a.email.localeCompare(b.email)));
}

2. 使用数据唯一标识作为列表key，替换索引key：

{slicedData.map((each) => {
    // 接口返回的每条数据都有唯一id，作为key即可
    return <p key={each.id}>{each.email}</p>
})}

3. 修正分页相关计算逻辑：

// 总页数按实际单页条数计算，向上取整避免余数页丢失
setPages(Math.ceil(json.length / ITEMS_PER_PAGE));
// 修正切片起始索引，第一页从0开始取值
const slicedData = data.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);

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