时间戳

首页 > 解决方案 > react js中的位置排名表

javascript - react js中的位置排名表

问题描述

我正在 Reactjs 中创建一个 Web 应用程序，其排名表全部由 firebase 管理，但我遇到了一个疑问：根据使用“order by”命令下注最多的人对表进行排序后，我希望我能更改位置编号，例如，如果它是第二个，它将成为第一个（从 2 到 1）。那是我的屏幕：截屏

那是我的代码：

import React, {useState, useEffect} from 'react'
import './Table.css'
import {firebase} from '../../firebase'


function Table() {

const [peopleShow, setPeopleShow] = useState([]);

const ref = firebase.firestore().collection("Lista");
console.log(ref);

function getData(){
  ref
  .orderBy("money", "desc")
  .onSnapshot((querySnapshot) => {
    const items = [];
    querySnapshot.forEach((doc) => {
      items.push(doc.data());
    });
    setPeopleShow(items);
  })
}

useEffect(() => {
  getData();
}, [])

return (
<section>
<div class="tbl-content">
<table cellpadding="0" cellspacing="0" border="0">
  <tbody>
  {peopleShow.map((val) => {
    return( 
    <tr key={val.ID}>
      <td>{val.ID}</td>    
      <td>{val.nationality}</td>
      <td>{val.username}</td>
      <td>{val.money}  $  <i class="far fa-caret-up"></i></td>
      <td>{val.lastbid}</td>
      <td>{val.newbid} $</td>
    </tr>
   )
   })}
   </tbody>
   </table>
   </div>
   </section>
  )}
  export default Table

所以我想解决这个疑问，我应该做一个冒泡排序吗？我声明我用我的数据库的 id 暂时定义的表的位置。谢谢大家！！

标签： javascriptnode.jsreactjsfirebasegoogle-cloud-firestore

解决方案

您可以在 map 函数中使用索引，而不是使数字依赖于数据。

{peopleShow.map((val, index) => {
    return( 
    <tr key={val.ID}>
      <td>{index + 1}</td>    
      <td>{val.nationality}</td>
      <td>{val.username}</td>
      <td>{val.money}  $  <i class="far fa-caret-up"></i></td>
      <td>{val.lastbid}</td>
      <td>{val.newbid} $</td>
    </tr>
   )
   })}

推荐阅读