将 firebase 数据显示到 React table

Question

我无法使用 React 将我的 firebase 数据库中的数据显示到 table。我将如何映射包含以下内容的交易：收款人、金额、日期、类别到 table？所以当用户输入交易时，它被映射到table。例如输入交易时

const transaction = {
  payee: Wal-mart, 
  date: 01-29-2022,
  category: groceries,
  amount: 120,
  From Account: Checking

我正在尝试使用语义 UI 构建一个 table，因此当输入交易时，它将填充到一个 table 中以供查看。我尝试构建 table 正文，但它不允许我将每个交易值映射为一行。是否有更有效的方法将其动态输入到 table 或可以使其更简单的框架中？

例如，

import AddTransaction from "./AddTransaction";

import { useCollection } from "../../hooks/useCollection";

//styles
import "./Transactions.css";
import { Table } from "semantic-ui-react";

export default function Transactions() {
  const { documents, error } = useCollection("transactions");

  return (
    <div className='transactions'>
      <div className='transaction-title'>
        <h1>Transactions</h1>
      </div>
      <AddTransaction />
      <div className='transactions-list'>
        {error && <p className='error'>{error}</p>}
        {documents && (
          <>
            <Table celled>
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>Payee</Table.HeaderCell>
                  <Table.HeaderCell>Date</Table.HeaderCell>
                  <Table.HeaderCell>Category</Table.HeaderCell>
                  <Table.HeaderCell>Amount</Table.HeaderCell>
                  <Table.HeaderCell>Notes</Table.HeaderCell>
                  <Table.HeaderCell>From Account</Table.HeaderCell>
                </Table.Row>
                <Table.Body>
                  <Table.Row>
                    {documents.map((doc) => (
                      <>
                        <Table.Cell>{doc.transaction}</Table.Cell>
                        <Table.Cell>{doc.date}</Table.Cell>
                        <Table.Cell>{doc.amount}</Table.Cell>
                      </>
                    ))}
                  </Table.Row>
                </Table.Body>
              </Table.Header>
            </Table>
          </>
        )}
      </div>
    </div>
  );
}

Answer 1

您没有说明您运行遇到了哪个错误，所以我可能漏掉了一些东西，但以下是我注意到的问题：

根据您上面写的内容，我假设每个事务都映射到一个文档，在根级别具有字段 date、payee 等。假设是这种情况，则没有 transaction 字段，因此 (<Table.Cell>{doc.transaction}</Table.Cell>) 没有意义。
即使 doc 上有交易对象，您还是试图将对象直接输出到 DOM (<Table.Cell>{doc.transaction}</Table.Cell>)。对象在 React 中不是有效的子对象，因此会抛出错误。
您正在尝试直接使用该文档，但您需要通过 Firebase 在每个文档中包含的 data() 方法来访问其数据。 doc 也有其他信息，如 id 和 createTime，因此需要使用 data() 方法来获取你的数据。

您正在寻找这样的东西：

<Table.Row>
    {documents.map((doc) => (
        <>
            <Table.Cell>{doc.data().date}</Table.Cell>
            <Table.Cell>{doc.data().payee}</Table.Cell>
            <Table.Cell>{doc.data().category}</Table.Cell>
            <Table.Cell>{doc.data().amount}</Table.Cell>
        </>
    ))}
</Table.Row>

将 firebase 数据显示到 React table

Displaying firebase data onto React table

firebase

reactjs

reactfire

google-cloud-firestore