Javascript 如何在React Js中对表中的api数据进行排序

这几天我一直在想办法。我在网上看过，但是每个人的例子在api和他们使用的方法方面都是不同的。我试图在表头上放置一个onClick处理程序，它将自己排序为asc到desc，反之亦然。当我单击列标题时，它不会排序。任何帮助都将不胜感激。谢谢

import "./App.css";
import { useEffect, useState } from "react";
import axios from "axios";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import { withStyles, makeStyles } from "@material-ui/core/styles";
function App() {
  const [data, setData] = useState([]);

  useEffect(async () => {
    await axios
      .get("https://data.nasa.gov/resource/gh4g-9sfh.json?$limit=15")
      .then((res) => {
        setData(res.data);
        console.log(res.data);
      });
  }, []);
  const StyledTableCell = withStyles((theme) => ({
    head: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
    },
    body: {
      fontSize: 14,
    },
  }))(TableCell);
  const StyledTableRow = withStyles((theme) => ({
    root: {
      "&:nth-of-type(odd)": {
        backgroundColor: theme.palette.action.hover,
      },
    },
  }))(TableRow);
  const useStyles = makeStyles({
    table: {
      minWidth: 700,
    },
  });
  const classes = useStyles();

  const sortBy = (key) => {
    setData(data.sort((a, b) => a < b));
  };

  return (
    <div style={{ maxWidth: "100%" }}>
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label="simple table">
          <TableHead>
            <TableRow>
              <StyledTableCell onClick={() => sortBy("id")} align="right">
                ID
              </StyledTableCell>
              <StyledTableCell align="right">Name</StyledTableCell>
              <StyledTableCell align="right">Rec Class</StyledTableCell>
              <StyledTableCell align="right">Name Type</StyledTableCell>
              <StyledTableCell align="right">Year</StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((item) => (
              <StyledTableRow key={item.id}>
                <StyledTableCell align="right">{item.id}</StyledTableCell>
                <StyledTableCell align="right">{item.name}</StyledTableCell>
                <StyledTableCell align="right">{item.recclass}</StyledTableCell>
                <StyledTableCell align="right">{item.nametype}</StyledTableCell>
                <StyledTableCell align="right">{item.year}</StyledTableCell>
              </StyledTableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}
export default App;

导入“/App.css”； 从“react”导入{useffect，useState}； 从“axios”导入axios； 从“@物料界面/核心/表格”导入表格； 从“@material ui/core/TableBody”导入表体； 从“@material ui/core/TableCell”导入TableCell； 从“@material ui/core/TableContainer”导入TableContainer； 从“@material ui/core/TableHead”导入表头； 从“@material ui/core/TableRow”导入TableRow； 从“@material ui/core/Paper”导入纸张； 从“@material ui/core/styles”导入{withStyles，makeStyles}”； 函数App（）{ const[data，setData]=useState（[]）； useffect（异步（）=>{ 等待axios .get（“https://data.nasa.gov/resource/gh4g-9sfh.json?$limit=15”） 。然后（（res）=>{ setData（res.data）； console.log（res.data）； }); }, []); const StyledTableCell=带有样式（（主题）=>({ 负责人：{ 背景色：theme.palette.common.black， 颜色：theme.palette.common.white， }, 正文：{ 尺寸：14， }, }))（表细胞）； const StyledTableRow=带有样式（（主题）=>({ 根目录：{ “&：第n个类型（奇数）”：{ 背景色：theme.palete.action.hover， }, }, }))（表行）； const useStyles=makeStyles({ 表:{ 最小宽度：700， }, }); const classes=useStyles（）； const sortBy=（键）=>{ setData（data.sort（（a，b）=>a 身份证件 名称 Rec类 名称类型 年 {data.map（（项）=>( {item.id} {item.name} {item.recclass} {item.nametype} {项目年份} ))} ); } 导出默认应用程序；

---

能否添加一个存储在

数据中的数据示例？当然，我添加了一张照片，谢谢！您可以在
const sortBy=（key）=>{setData（data.sort（（a，b）=>a确定如果您的id是唯一的，您可以尝试此
const sortBy=（）=>{setData（data.sort（（a，b）=>{return（a.id-b.id）；}}；}
类似于此中的解释，您确定在切片之后添加了“（）”？如果是，请再次显示整行。