使用材料设计表表示数据

Question

帮助我将我的 Firebase 数据检索到材料表中。 我需要在 MDBtable 上显示我的数据。但我找不到更好的方法来做到这一点。如果我可以在 MDB 的数据函数中的 rows 数组中表示我的 firebase 数据，我认为这个困难将得到解决。这里我提到了我用来从 firebase 和其他 crud 操作中检索数据的代码块。

import React from 'react';
import { MDBDataTable } from 'mdbreact';

const Stable = () => {
  const data = {
 columns: [
      {
        label: 'assignid',
        field: 'assignid',
        sort: 'asc',
        width: 150
      },
      {
        label: 'customerphone',
        field: 'customerphone',
        sort: 'asc',
        width: 270
      },
      {
        label: 'driverid',
        field: 'driverid',
        sort: 'asc',
        width: 200
      },
      {
        label: 'pkgid',
        field: 'pkgid',
        sort: 'asc',
        width: 100
      },
      {
        label: 'tripstatus',
        field: 'tripstatus',
        sort: 'asc',
        width: 150
      }  
    ],
   rows: [
      {
        assignid: 'ID-123',
        customerphone: '07764259781',
        driverid: 'AA-23341',
        pkgid: '002AS',
        
      },
      {
        assignid: 'ID-123',
        customerphone: '071648755',
        driverid: 'AA-1233',
        pkgid: '612AS',
      }
   ]
  };


  return (
    <MDBDataTable
      striped
      bordered
      small
      data={data}
    />
  );
}

export default Stable;

下面的代码块是我用来从 firebase 检索数据的方式 在 MDBDataTable 中已经建立了分页、搜索和排序功能。 https://mdbootstrap.com/docs/react/tables/search/

import React, { useState, useEffect } from "react";
import fireDB from '../../firebase';
import PkgasForm from "./PkgasForm";
const PkgAssign = ({  }) => {
          var [PkgasObjects, setPkgasObjects] = useState({});
          var [currentId, setcurrentId] = useState("");

          
        useEffect(() => {
          fireDB.database().ref().child("packageassign").on("value", (snapshot) => {
            if (snapshot.val() != null)
              setPkgasObjects({
                ...snapshot.val(),
              });
          });
        }, []);
      const addOrEdit = (obj) => {
            if (currentId == "")
              fireDB.database().ref().child("packageassign").push(obj, (err) => {
                if (err) console.log(err);
                else setcurrentId("");
              });
            else
              fireDB.database().ref().child(`packageassign/${currentId}`).set(obj, (err) => {
                if (err) {
                  console.log(err);
                } else setcurrentId("");
              });
          };

                  const onDelete = (key) => {
                    if (window.confirm("Are you sure to delete this recod ?")) {
                      fireDB.database().ref().child(`packageassign/${key}`).remove((err) => {
                        if (err) {
                          console.log(err);
                        } else setcurrentId("");
                      });
                    }
                  };
    return (
<h2>Package Assigning</h2>
        <div className="row">
          <div className="col-md-3">
            <PkgasForm {...{ addOrEdit, currentId, PkgasObjects }} /> //from to get user inserted data... 
          </div>
          <div className="col-md-9">
 <table className="table table-border table-stripped">
              <thead className="thread-light">
                <tr>
                  <th>assignid</th>
                  <th>customerphone</th>
                  <th>driverid</th>
                  <th>pkgid</th>
                  <th>tripstatus</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {Object.keys(PkgasObjects).map((id) => {
                  return (
                    <tr key={id}>
                      <td>{PkgasObjects[id].assignid}</td>
                      <td>{PkgasObjects[id].customerphone}</td>
                      <td>{PkgasObjects[id].driverid}</td>
                      <td>{PkgasObjects[id].pkgid}</td>
                      <td>{PkgasObjects[id].tripstatus}</td>

                      <td>
                        <a
                          className="btn text-primary"
                          onClick={() => {
                            setcurrentId(id);
                          }}
                        >
                          <i className="fas fa-pencil-alt"></i>
                        </a>
                        <a
                          className="btn text-danger"
                          onClick={() => {
                            onDelete(id);
                          }}
                        >
                          <i className="far fa-trash-alt"></i>
                        </a>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>

Answer 1

使用 js 中使用的.map() 函数可以简单地解决这个问题。从特定路由获取数据并使用.map() 将其分配给columns 属性。