无法在 React 中对列进行排序答案

【问题标题】：Unable to sort a column in React无法在 React 中对列进行排序
【发布时间】：2020-07-20 03:11:04
【问题描述】：

我正在尝试按字母顺序对表格中的“设备”列进行排序。我是新来的反应，发现了这种在反应中排序的方法。哪里错了？

function createData(videos, status, model, manage, device, favourite) {
return { videos, status, model, manage, device, favourite };
}
const rows = [
createData("https://www.youtube.com/watch?v=ug50zmP9I7s", 'Online', 2, 24, 'Cam1', true),
createData("https://www.youtube.com/watch?v=Bey4XXJAqS8", 'Offline', 2, 37, 'Am2', true),
createData("https://www.youtube.com/watch?v=Bey4XXJAqS8", 'Online', 2, 24, 'Zam3', false),
createData("https://www.youtube.com/watch?v=ug50zmP9I7s", 'Offline', 2, 67, 'Dam4', false),
createData("https://www.youtube.com/watch?v=Bey4XXJAqS8", 'Online', 2, 49, 'Lam5', false),
];

这是我用于排序的排序逻辑

export default function StreamPage(props) {
    const [sortType, setSortType] = React.useState('device');
    const [Results, setResults] = React.useState(rows);
    const [sortDirection, setSortDirection] = React.useState("DESC"); 
  
    useEffect(() => {
        const sortArray = () => {
          const types = {
            device: 'device',
          };
      let type ='device';
      const sortProperty = types[type];
      const sorted = [...rows].sort((a, b) => b[sortProperty] - a[sortProperty]);
      console.log(sorted); // sorted is not giving the sorted column here 
      setResults(sorted);
    };

这是我的返回函数

 return(
    <div onClick={setSortType} className="div">
        <div class="info">
            {sortDirection === "ASC" ? (
                <KeyboardArrowUpIcon fontSize='small' />
            ) : (
                    <KeyboardArrowDownIcon fontSize='small' />
                )

            }
        </div>
   );}

【问题讨论】：

const sorted = [...rows].sort((a, b) => b()[sortProperty] - a()[sortProperty]);这行得通吗？我认为您需要执行每一行，否则它会尝试对函数进行排序？
非常感谢 James 的回复，但由于该列包含字符串，因此 localeCompare 解决了我的问题。

标签： reactjs react-native react-redux rxjs azure-active-directory

【解决方案1】：

您应该使用 String localeCompare() 方法，因为您正在比较 String 属性。

const sorted = [...rows].sort((a, b) => a[sortProperty].localeCompare(b[sortProperty]));

【讨论】：

非常感谢雷。你是正确的字符串比较 localeCompare 是正确的方法。干杯
没问题！很高兴我能帮上忙。

【解决方案2】：

您需要将更改依赖项传递给您的 useEffect 挂钩。

useEffect(() => {
    ....
    ....
}, [sortProperty]);

【讨论】：

非常感谢您的回复。用于列排序的 localeCompare 解决了我的问题。