如何通过 ReactJS 中指定列的升序对 table 进行排序？

Question

我有一个 table 从名为 blockInfo:

的对象获取数据

            <table>
                <thead>
                    <tr>
                        <th>Timestamp</th>
                        <th>Block #</th>
                        <th>Block Hash</th>
                        <th>Miner</th>
                        <th>Gas used</th>
                        <th>Txs #</th>
                    </tr>
                </thead>
                <tbody>
                    {blockInfo.map((block) =>
                        < tr >
                            <td >{timeSince(new Date(block.timestamp * 1000))}</td>
                            <td id="blockNumber">{block.number}</td>
                            <td id="blockHash" >{block.hash}</td>
                            <td>{block.miner}</td>
                            <td>{block.gasUsed}</td>
                            <td>{block.transactions.length}</td>
                        </tr>
                    )}
                </tbody>
            </table>

它产生 table：

我想通过 Block # 列中的升序对 table 进行排序，我尝试添加 .sort() 以这种方式但它没有工作：

                <tbody>
                    {blockInfo.sort((a, b) => {
                        if (a > b) return 1;
                        if (a < b) return -10;
                        return 0;
                    }).map((block) =>
                        < tr >
                            <td >{timeSince(new Date(block.timestamp * 1000))}</td>
                            <td id="blockNumber">{block.number}</td>
                            <td id="blockHash" >{block.hash}</td>
                            <td>{block.miner}</td>
                            <td>{block.gasUsed}</td>
                            <td>{block.transactions.length}</td>
                        </tr>
                    )}
                </tbody>

有人知道我该怎么做吗？

Answer 1

我认为错误在于您的排序功能。参数 a 和 b 每个代表 blockInfo 列表中的一个对象。因此，为了使排序功能正常工作，您需要指定要排序的键。

试试这个代码：

<tbody>
         {blockInfo.sort((a, b) => {
                if (a.number > b.number) return 1; // .number is added 
                if (a.number < b.number) return -10; // .number is added
                return 0;
             }).map((block) =>
                        < tr >
                            <td >{timeSince(new Date(block.timestamp * 1000))}</td>
                            <td id="blockNumber">{block.number}</td>
                            <td id="blockHash" >{block.hash}</td>
                            <td>{block.miner}</td>
                            <td>{block.gasUsed}</td>
                            <td>{block.transactions.length}</td>
                        </tr>
             )}
</tbody>

如何通过 ReactJS 中指定列的升序对 table 进行排序？

How can I sort a table by ascending numbers from a specified column in ReactJS?

javascript

sorting

html-table

reactjs