React表格国家名称列无法排序问题排查求助

我看了你的代码，立马发现了问题所在——你现有的排序函数只针对数字类型的字段做了处理，而国家名称是字符串，用数字减法的逻辑根本走不通，这就是Country列排不了序的核心原因！另外还有个小细节：你直接对原数组调用sort方法，这会原地修改state里的数组，不符合React的immutable原则，可能会引发一些奇怪的渲染问题。

下面是修复后的完整代码，我会标注关键修改点：

const Table = () => { 
  const [country, setCountry] = useState([]); 
  const [toggle, setToggle] = useState(true); 

  // 修改后的通用排序函数，支持数字和字符串排序
  const sortColumn = (sort, columnName, data) => {
    // 先创建数组副本，避免修改原state数组
    const sortedData = [...data];
    sortedData.sort((a, b) => {
      const valueA = a[columnName];
      const valueB = b[columnName];
      
      if (typeof valueA === 'string' && typeof valueB === 'string') {
        // 字符串用localeCompare排序，支持多语言排序规则
        return sort ? valueB.localeCompare(valueA) : valueA.localeCompare(valueB);
      } else if (typeof valueA === 'number' && typeof valueB === 'number') {
        // 数字保持原有的减法逻辑
        return sort ? valueB - valueA : valueA - valueB;
      }
      return 0;
    });
    return sortedData;
  };

  useEffect(() => { 
    const loadData = async() => { 
      await fetch('https://api.covid19api.com/summary') 
        .then(response => response.json()) 
        .then(data => { 
          const stats = data.Countries; 
          // 调用修改后的排序函数，获取排序后的数组再设置state
          const sortedStats = sortColumn(toggle, 'TotalConfirmed', stats);
          setCountry(sortedStats); 
        }) 
    } 
    loadData(); 
  }, []); 

  return( 
    <React.Fragment> 
      <table className="table table-bordered table-stripped"> 
        <thead > 
          <tr onClick={(e) =>{ 
            const columnName = e.target.className;
            // 先排序得到新数组，再更新state
            const sortedData = sortColumn(toggle, columnName, country);
            setCountry(sortedData);
            setToggle(!toggle); 
          }} style={{cursor: "pointer"}} className="thead-dark"> 
            <th className="Country" scope="col">Country</th> 
            <th className="TotalConfirmed" scope="col">Total Cases</th> 
            <th className="NewConfirmed" scope="col">New Cases</th> 
            <th className="NewDeaths" scope="col">New Deaths</th> 
            <th className="TotalDeaths" scope="col">Total Deaths </th> 
            <th className="TotalRecovered" scope="col">Total Recovered </th> 
          </tr> 
        </thead> 
        <tbody> 
          <CountryStats country={country} /> 
        </tbody> 
      </table> 
    </React.Fragment> 
  ) 
}

关键修改说明： #

• 通用排序函数优化：把sortColumnNumber改成sortColumn，新增字符串排序逻辑，用localeCompare处理字符串比较，这是前端处理字符串排序的标准方式，还能兼容多语言场景。
• 避免直接修改原数组：通过[...data]创建数组副本再排序，不会破坏state里的原始数据，符合React状态更新的immutable原则。
• 调整状态更新逻辑：排序后生成新数组，再调用setCountry更新状态，而不是直接修改原数组后赋值。
• 点击事件顺序调整：先基于当前toggle值完成排序，再切换toggle状态，确保每次点击的排序逻辑都是正确的。

这样修改后，Country列就能正常进行升序/降序排序了，其他数字列的排序功能也不受影响～

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