reactjs - Material-ui 表排序不起作用reactjs

Question

美好的一天!目前使用 Material-ui 表，我在排序时遇到问题。我关注了 documentation 上的内容但排序在我这边不起作用。

这是我的代码:

import TablePagination from '@material-ui/core/TablePagination';
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 TableFooter from '@material-ui/core/TableFooter'
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import TableSortLabel from '@material-ui/core/TableSortLabel';

function descendingComparator(a,b, orderBy) {
  console.log('a',a)
  console.log('b',b)
  console.log('orderBy',orderBy)
  if(b[orderBy] < a[orderBy]){
    console.log('-1')
    return -1;
  }
  if(b[orderBy] > a[orderBy]){
    console.log('1')
    return 1;
  }
  console.log('0')
  return 0;
}

function getComparator(order, orderBy){
  return order === "desc"
    ? (a,b) => descendingComparator(a,b, orderBy)
    : (a,b) => -descendingComparator(a,b, orderBy)
}

const sortedRowInformation = (rowArray, comparator) => {
  const stabilizedRowArray = rowArray.map((el, index) => [el, index])
  stabilizedRowArray.sort((a,b) =>{
    const order = comparator(a[0], b[0])
    if(order !==0) return order;
    return a[1] - b[1];
})
return stabilizedRowArray.map((el) => el[0])
}

function Test(){
  const [dummyDatas, setdummyDatas] = useState([])
  const getInformation= async () => {
    await axios.get('/API')
        .then(response => {
            setdummyDatas(response.dummyDatas)
        })
  }
}

useEffect(()=>{
  getInformation()
})

const [page, setPage] = useState(0)
const [rowsPerPage, setRowsPerPage] = useState(5)
const [pageIndex, setPageIndex] = useState(0)
const [order, setOrder] = useState()
const [orderBy, setorderBy] = useState()
const [orderDirection, setorderDirection] = useState("asc")
const [valueToOrderBy, setvalueToOrderBy] = useState("details")

return(
 <div>
   <TableContainer component={Paper}>
     <Table className={classes.table} aria-label="information table">
       <TableHead>
         <TableRow>
           <TableCell align = "left" key = "details">
             <TableSortLabel
                active={valueToOrderBy === "details"}
                direction={valueToOrderBy === "details" ? orderDirection: 'asc'}
                onClick={createSortHandle("details")}
             >
                Details
             </TableSortLabel>
           </TableCell>
           <TableCell align = "left" key = "status">
             <TableSortLabel
               active={valueToOrderBy === "status"}
               direction={valueToOrderBy === "status" ? orderDirection: 'asc'}
               onClick={createSortHandle("status")}
             >
               Status
             </TableSortLabel>
           </TableCell>
           <TableCell align = "left" key = "system">
             <TableSortLabel
               active={valueToOrderBy === "system"}
               direction={valueToOrderBy === "system" ? orderDirection: 'asc'}
               onClick={createSortHandle("system")}
             >
               System
             </TableSortLabel>
           </TableCell>
         </TableRow>
       </TableHead>
       <TableBody>
         {
           sortedRowInformation(dummyDatas, getComparator(orderDirection, valueToOrderBy))
           .map((row, index1) => (
                        <TableRow key={index1}>
                            <TableCell>
                                        {row.ADVISORYTITLE}
                            </TableCell>
                            <TableCell>
                                        {row.STATUS}
                            </TableCell>
                            <TableCell>
                                        {row.SYSTEMID}
                            </TableCell>
                        </TableRow>
                    ))}
       </TableBody>
     </Table>
   </TableContainer>
 </div>
)

单击状态列上的排序箭头后，没有任何反应。这是我的 console.log 的样子。

希望你能帮我解决这个问题。提前非常感谢您。

Answer 1

使 valueToOrderBy 与数据列相同。 (例如咨询标题)