React表格按position排序异常：仅首位正确其余无序求助

问题分析 #

1. 排序逻辑错误：当前用字符串比较a.position > b.position，如果position是字符串类型（比如"10"和"2"），字符串比较会认为"10" < "2"，导致排序混乱。
2. 未使用排序后的数据：定义了sortData但渲染时仍然用原始的player数组，等于白排序。
3. 数组排序副作用：Array.sort()会直接修改原数组，可能导致状态异常。

修复方案 #

方案1：获取数据后直接排序再存状态

修改fetchData中的状态更新部分：

// 合并数据后先排序
const sortedPlayers = [...newPlayer].sort((a, b) => {
  // 处理没有position的情况，让这类数据排在最后
  if (a.position === undefined) return 1;
  if (b.position === undefined) return -1;
  // 转为数值后做减法比较，保证正确排序
  return Number(a.position) - Number(b.position);
});
setPlayer(sortedPlayers);

方案2：在分页时先排序再切片

修改getData函数：

const getData = (current, pageSize) => {
  if (!player) return [];
  // 先复制数组再排序，避免修改原状态
  const sortedPlayers = [...player].sort((a, b) => {
    if (a.position === undefined) return 1;
    if (b.position === undefined) return -1;
    return Number(a.position) - Number(b.position);
  });
  return sortedPlayers.slice((current - 1) * pageSize, current * pageSize);
};

额外清理 #

• 删掉无用的sortData变量，因为没有被任何地方引用。

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