如何使用React中的功能组件按降序对数据进行排序并在表中显示

Question

我正在做React项目，在该项目中，数据来自后端，对于该数据

我需要排序。数据只是数字。我正在使用在控制台中打印数据

使用效果挂钩。现在我必须写两个函数，第一个函数是在升序中显示数据

顺序和第二个函数是按降序显示数据。为此，我必须使用

Sort方法但是我不知道如何使用state来编写这个函数。我必须申请

函数对图标进行排序。

这是Form.js

import React, { useState, useEffect } from 'react';
import { Table } from 'reactstrap';
import Aumservice from '../../service/aum-service';

const GetAumListComponent = (props) => {
useEffect(() => {
(async function () {
const response = await Aumservice.getAum()
console.log(response.data.list.map(ele => ele.maxValue))
})()
}, [])
return (
<div>
<Aumcompanymodal data={editAumData} editSubmitFunction={editSubmitFunction} openModal={modal} closeModal={handleCancelModal}></Aumcompanymodal>
<IconContext.Provider
value={{ size: '25px' }}
>
<Table bordered>
<thead>
<tr>
<th>So No</th>
<th>Min</th>
<th>Max <i class="fas fa-sort fa-2x common"></i></th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{props.getAumState.map((currentValue, index) => {
return < tr key={index + 1} >
<th scope="row">{index + 1}</th>
<td>{currentValue.minValue}</td>
<td>{currentValue.maxValue}</td>
<td>
<MdEdit onClick={() => editMethod(currentValue)}></MdEdit>
</td>
</tr>
})}
</tbody>
</Table>
</IconContext.Provider>
</div >
)
}
export default GetAumListComponent

Answer 1

假设您已经将数据存储在如下状态：

const [data, setData] = React.useState([])

然后您将创建以下两个函数：

const sortAscending = () => {
let sortedData = data.sort((a, b) => a - b)
setData(sortedData)
}
const sortDescending = () => {
let sortedData = data.sort((a, b) => b - a)
setData(sortedData)
}

Answer 2

you can use useEffcet
function call orderBy -
orderBy('timestamp', 'desc')
useEffect(() => {
db.collection('messages').orderBy('timestamp', 'desc').onSnapshot(snapshot 
=>     {
setMessages(snapshot.docs.map(doc => doc.data()))
})