React表格默认按首列数字排序求助（含React-Pagination代码）

要让表格默认按首列（position字段）的数字升序排列，核心是对数据进行数字排序，而非使用数组默认的字符串排序逻辑。以下是具体修改方案：

关键改动点 #

1. 原代码中getData函数的player?.sort()是默认字符串排序，会导致数字排序异常（比如10排在2前面），需替换为按position字段的数字排序逻辑。
2. 选择在获取数据后直接排序存入状态，避免每次分页时重复排序，提升性能。

修改后的完整代码 #

import axios from "axios";
import React, { useState, useEffect } from "react";
import Pagination from "https://cdn.skypack.dev/rc-pagination@3.1.15";

const News = () => {
  const [playerName, setPlayerName] = useState([]);
  const [playerRank, setPlayerRank] = useState([]);
  const [player, setPlayer] = useState([]);
  const [perPage, setPerPage] = useState(10);
  const [size, setSize] = useState(perPage);
  const [current, setCurrent] = useState(1);

  const fetchData = () => {
    const playerAPI = 'http://localhost:3008/api/players';
    const playerRankAPI = 'http://localhost:3008/api/highscore/players';

    const getPlayerInfo = axios.get(playerAPI)
    const getPlayerRank = axios.get(playerRankAPI)
    axios.all([getPlayerInfo, getPlayerRank]).then(
      axios.spread((...allData) => {
        const allDataPlayer = allData[0].data.players
        const playerRankData = allData[1].data.players
        const newPlayer = allDataPlayer.map(name => {
          const rankInfo = playerRankData.find(rank => name.id === rank.id)
        
          return {
            id: name.id,
            name: name.name,
            status: name.status,
            alliance: name.alliance,
            position: rankInfo?.position,
            score: rankInfo?.score
          }
        })

        setPlayerName(allDataPlayer)
        setPlayerRank(playerRankData)
        // 获取数据后直接按position升序排序
        const sortedPlayers = newPlayer.sort((a, b) => (a.position || 0) - (b.position || 0));
        setPlayer(sortedPlayers)
      })
    )
  }

  useEffect(() => {
    fetchData()
  }, [])

  const PerPageChange = (value) => {
    setSize(value);
    const newPerPage = Math.ceil(player.length / value);
    if (current > newPerPage) {
      setCurrent(newPerPage);
    }
  }

  const getData = (current, pageSize) => {
    // 已提前排序，直接切片分页
    return player?.slice((current - 1) * pageSize, current * pageSize);
  };

  const PaginationChange = (page, pageSize) => {
    setCurrent(page);
    setSize(pageSize)
  }

  const PrevNextArrow = (current, type, originalElement) => {
    if (type === 'prev') {
      return <button><i className="fa fa-angle-double-left"></i></button>;
    }
    if (type === 'next') {
      return <button><i className="fa fa-angle-double-right"></i></button>;
    }
    return originalElement;
  }

  return (
    <>
      <div className="container-fluid mt-5 mb-5">
        <div className="row justify-content-center">
          <div className="col-md-10">
            <div className="card">
              <div className="card-body p-0">
                <div className="table-filter-info">
                  <Pagination
                    className="pagination-data"
                    showTotal={(total, range) => `Showing ${range[0]}-${range[1]} of ${total}`}
                    onChange={PaginationChange}
                    total={player.length}
                    current={current}
                    pageSize={size}
                    showSizeChanger={false}
                    itemRender={PrevNextArrow}
                    onShowSizeChange={PerPageChange}
                  />
                </div>
                <div className="table-responsive">
                  <table className="table table-text-small mb-0">
                    <thead className="thead-primary table-sorting">
                      <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Points</th>
                        <th>Alliance</th>
                        <th>Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      {getData(current, size)?.map((playerItem) => (
                        <tr key={playerItem.id}>
                          <td>{playerItem.position}</td>
                          <td>{playerItem.name}</td>
                          <td>{playerItem.score}</td>
                          <td>{playerItem.alliance}</td>
                          <td>{playerItem.status}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                <div className="table-filter-info">
                  <Pagination
                    className="pagination-data"
                    showTotal={(total, range) => `Showing ${range[0]}-${range[1]} of ${total}`}
                    onChange={PaginationChange}
                    total={player.length}
                    current={current}
                    pageSize={size}
                    showSizeChanger={false}
                    itemRender={PrevNextArrow}
                    onShowSizeChange={PerPageChange}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default News

额外修复说明 #

• 补充了原代码中缺失的alliance字段映射，确保表格该列正常显示
• 将列表项的key从player.name改为playerItem.id，避免因重名导致React渲染异常
• 修复了PerPageChange函数中未赋值的players变量问题，改为使用player状态

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