我用React和MUI创建了一个表，并实现了Soting，但排序不起作用

Question

我在React表中实现了一个排序函数。我想要"；国籍；列以升序和降序排序。但排序不起作用。我做错了什么？

我的代码：

import React, {useEffect, useState} from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import TableSortLabel from "@mui/material/TableSortLabel";
import { TextField } from '@mui/material';
import "./table.css";

function createUserData (fullname, email, nationality, city){
return {fullname, email, nationality, city};
}
const rows= [];
export default function RandomUserTable(){
const [data, setData]= useState([]);
const [rowData, setRowData]= useState(rows);
const [orderDirection, setOrderDirection]= useState("asc");


useEffect(()=>{
fetch('https://randomuser.me/api/?results=30')
.then((response) => {
return response.json();
})
.then((data) => {
setData(data);
console.log(data);
});
}, []);
const sortArray= (arr, orderBy)=> {
switch (orderBy){
case "asc":
default:
return arr.sort ((a,b)=>
a.nationality> b.nationality? 1:b.nationality > a.nationality? -1:0
);
case "desc":
return arr.sort((a, b)=>
a.nationality < b.nationality ? 1 : b.nationality< a.nationality ? -1 : 0 
);
}
};
const handleSortRequest = ()=>{
setRowData(sortArray(rows, orderDirection));
setOrderDirection(orderDirection === "asc"? "desc":"asc");
}

return (
<TableContainer component={Paper}>
<Table aria-label="simple table" stickyHeader>
<TableHead>
<TableRow>
<TableCell>
Fullname                 
</TableCell>
<TableCell align="right">
E-Mail 

</TableCell>
<TableCell onClick={handleSortRequest} align="right">
<TableSortLabel active={true} direction={orderDirection}>
Nationality
</TableSortLabel>
</TableCell>
<TableCell align="right">City</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.results?.map((user,index) => (
<TableRow key={index}>
<TableCell component="th" scope="row">
{ (user.name.first)+ " " +(user.name.last)}
</TableCell>
<TableCell align="right">{user.email}</TableCell>
<TableCell align="right">{user.nat}</TableCell>
<TableCell align="right">{user.location.city}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}

Answer 1

sort直接修改数组，您应该创建一个状态的浅副本，然后对副本进行排序

const sortArray= (arr, orderBy)=> {
switch (orderBy){
case "asc":
default:
return [...arr].sort ((a,b)=>
a.nationality> b.nationality? 1:b.nationality > a.nationality? -1:0
);
case "desc":
return [...arr].sort((a, b)=>
a.nationality < b.nationality ? 1 : b.nationality< a.nationality ? -1 : 0 
);
}
};