以升序和降序方式对 Table 中的列进行排序

Question

I have created a Table with React and MUI, and tried to implement a sorting function for each column in ascending and descending way. But when I click on the header to sort the column, I get an error, that says "Data is not iterable" in the console, and I have not been able to figure out where the mistake is.

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 TablePagination from '@mui/material/TablePagination';

import { createStyles, 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");
    const [order, setOrder]=useState('asc');


    const [searchTerm, setSearchTerm]= useState('');

    const [page, setPage] =useState(0);
    const [rowsPerPage, setRowsPerPage] =useState(10);

    const handleChangePage = (event, newPage) => {
      setPage(newPage);
    };
  
    const handleChangeRowsPerPage = (event) => {
      setRowsPerPage(+event.target.value);
      setPage(0);
    };

    useEffect(()=>{
            fetch('https://randomuser.me/api/?results=30')
            .then((response) => {
                return response.json();
              })
              .then((data) => {
                setData(data);
                console.log(data);
              });
    }, []);

    const sorting=(col)=>{
      if(order==='asc'){
        const sorted= [...data].sort((a,b)=>
        a[col].toLowerCase()>b[col].toLowerCase()?1:-1
        );
        setData(sorted);
        setOrder('dsc')
      }
      if(order==='dsc'){
        const sorted= [...data].sort((a,b)=>
        a[col].toLowerCase()<b[col].toLowerCase()?1:-1
        );
        setData(sorted);
        setOrder('asc')
      }
    }

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

    // const handleSortRequest = ()=>{
    //     setRowData(sortArray(rows, orderDirection));
    //     setOrderDirection(orderDirection === "asc"? "desc":"asc");
    // }

    return (
        <>
        <TextField sx={{ width: 660, marginBottom: "2rem", marginTop: "2rem", border: "2px solid violet" }} className="text-field" onChange={event=>{setSearchTerm(event.target.value)}} placeholder="Search..."></TextField>

        <TableContainer component={Paper} sx={{width:800, margin: "0 auto"}}>
          <Table stickyHeader className="table" aria-label="simple table">
            <TableHead>
              <TableRow sx={{'& .MuiTableCell-root':{backgroundColor:"rgb(120, 169, 233)", border: "1px solid white", color: 'white'}}}>
                <TableCell  align="center">Fullname</TableCell>
                <TableCell onClick={()=>sorting("email")} align="center">E-Mail</TableCell>
                <TableCell onClick={()=>sorting("nat")} align="center">Nationality</TableCell>
                {/* <TableCell align="center" onClick={handleSortRequest}> */}
                <TableCell align="center">
                <TableSortLabel style={{color: 'white'}} active={true}>City</TableSortLabel>

                {/* <TableSortLabel style={{color: 'white'}} active={true} direction={orderDirection}>City</TableSortLabel> */}
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.results?.slice(page*rowsPerPage, page*rowsPerPage+rowsPerPage).filter((val)=>{
                if(searchTerm=== ""){
                    return val
                }else if(val.nat.toLowerCase().includes(searchTerm.toLowerCase()) ){
                    return val
                }else if(val.email.toLowerCase().includes(searchTerm.toLowerCase())){
                    return val
                }else if(val.location.city.toLowerCase().includes(searchTerm.toLowerCase())){
                    return val
                }
              }).map((user,index) => (
                <TableRow key={index} sx={{'& .MuiTableCell-root':{backgroundColor: 'rgba(54, 96, 129, 0.241)', height: '3rem'}}}>
                  <TableCell align="center" component="th" scope="row">
                  { (user.name.first)+ " " +(user.name.last)}
                  </TableCell>
                  <TableCell align="center">{user.email}</TableCell>
                  <TableCell align="center">{user.nat}</TableCell>
                  <TableCell align="center">{user.location.city}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
        <TablePagination
        rowsPerPageOptions={[10, 25, 100]}
        component="div"
        count={rows.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
      />
        </>
      );
    }

enter image description here