Javascript Console.log（）在控制台中使用数组（0）记录[]，其中展开时显示其中存储的所有数据

我试图制作一个仪表板，我面临着将数据记录到控制台的问题。当我看到日志时，它是这样的[]，但在扩展时，有数据是这样的

    []
0: {paymentID: "pay_H7DssGOp76Ou3g", currency: "INR", date: t, amount: 1, phoneNumber: 7044804030, …}
1: {date: t, name: "Anas Alam", email: "anasalam027@gmail.com", amount: 1, paymentID: "pay_H7DlkFfmPoEr9l", …}
length: 2
__proto__: Array(0)

我想在我的组件中使用这些数据在react表中显示它

这是我的付款页面：

import React, { useEffect, useState } from "react";
import "./payments.css";
import firebase from "firebase";
import Table from "../../components/table/table";

function Payments() {
  const [payments, setPayments] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    var payments2 = [];
    firebase
      .firestore()
      .collection("payments")
      .onSnapshot((snap) =>
        snap.docChanges().forEach((change) => {
          var payment = change.doc.data();
          payment.id = change.doc.id;
          payments2.push(payment);
        })
      );
    setPayments(payments2);
    setLoading(false);
  }, []);

  const columns = [
    {
      Header: "Name",
      accessor: "name",
    },
    {
      Header: "Payment ID",
      accessor: "paymentID",
    },
    {
      Header: "Currency",
      accessor: "currency",
    },
    {
      Header: "Amount",
      accessor: "amount",
    },
    {
      Header: "Phone Number",
      accessor: "phoneNumber",
    },
    {
      Header: "Email",
      accessor: "email",
    },
  ];

  return (
    <div className="payments">
      <div className="title">
        <h2>Payments</h2>
      </div>
      <div className="body">
        {loading ? (
          <h4>loading</h4>
        ) : (
          <Table columns={columns} data={payments} />
        )}
      </div>
    </div>
  );
}

export default Payments;

import React，{useffect，useState}来自“React”；
导入“/payments.css”；
从“firebase”导入firebase；
从“../../components/Table/Table”导入表格；
职能付款（）{
const[payments，setPayments]=useState（[]）；
const[loading，setLoading]=useState（true）；
useffect（（）=>{
var payments2=[]；
火基
.firestore（）
.收款（“付款”）
.onSnapshot（（捕捉）=>
snap.docChanges（）.forEach（（更改）=>{
var payment=change.doc.data（）；
payment.id=change.doc.id；
付款2.推送（付款）；
})
);
设置付款（付款2）；
设置加载（假）；
}, []);
常量列=[
{
标题：“姓名”，
访问者：“名称”，
},
{
标题：“付款ID”，
访问者：“paymentID”，
},
{
标题：“货币”，
访问者：“货币”，
},
{
标题：“金额”，
访问者：“金额”，
},
{
标题：“电话号码”，
访问者：“电话号码”，
},
{
标题：“电子邮件”，
访问者：“电子邮件”，
},
];
返回(
付款
{加载(
加载
) : (
)}
);
}
出口违约金；

这是我传递数据的表格：

import { useTable } from "react-table";

function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({
      columns,
      data,
    });

  console.log(rows);
  //   console.log(arr);
  console.log(data);

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default Table;

从“react table”导入{useTable}；
函数表（{columns，data}）{
//使用useTable返回的状态和函数构建UI
常量{getTableProps，getTableBodyProps，HeaderGroup，rows，prepareRow}=
有用的({
柱，
数据，
});
console.log（行）；
//控制台日志（arr）；
控制台日志（数据）；
//呈现表的UI
返回(
{headerGroups.map（（headerGroups）=>(
{headerGroup.headers.map（（列）=>(
{column.render（“Header”）}
))}
))}
{rows.map（（row，i）=>{
准备工作（世界其他地区）；
返回(
{row.cells.map（（cell）=>{
返回{cell.render（“cell”）}；
})}
);
})}
);
}
导出默认表；

这是我的控制台：

我希望我们能尽快解决这个问题。 先谢谢你