如何在一列中显示这些项目数组？

Question

这是我从 firestore 获取数据的代码。

class PendingOrdersTable extends Component {
  constructor() {
    super();
    this.state = { orders: [] };
  }

  columns = [
    "Order ID",
    "Items",
  ];
  options = {
    filter: true,
  };

  componentDidMount() {
    try {
      firestore
        .collection("orders")
        .where("orderStatus", "==", "Pending")
        .get()
        .then((snapshot) => {
          const orders = [];
          snapshot.docs.map((doc) => {
            const orderID = doc.id;
            const data = doc.data();
            data.items.forEach((item) => {
              orders.push({
                "Order ID": doc.id,
                Items: [item.productName, "(", item.qty, ")"],
              });
            });

          });
          this.setState({ orders: orders });
          console.log(JSON.stringify(this.state.orders));
        });
    } catch (err) {
      console.log(error);
    }
  }

  render() {
    return (
      <div>
        <MUIDataTable
          title={"Orders"}
          columns={this.columns}
          data={this.state.orders}
          options={this.options}
        />
      </div>
    );
  }
}

]

问题在于它会为同一文档 ID 呈现不同的行。它应该在一栏中显示 [q2P7DafXDvma6eMztEir]、金枪鱼披萨 (1) 和蔬菜披萨 (2)。

这是 JSON 对象：

    [
      {
        "Order ID": "q2P7DafXDvma6eMztEir",
        Name: "Ruhn",
        "Total Amount": 390,
        Items: ["Tuna Pizza", "(", 1, ")"],
      },
      {
        "Order ID": "q2P7DafXDvma6eMztEir",
        Name: "Ruhn",
        "Total Amount": 390,
        Items: ["Vegetable Pizza", "(", 2, ")"],
      },

];

这是firestore中的数据，这里的“Items”在数组中：

Answer 1

用下面的代码片段替换 snapshot.docs.map 方法，它将附加相同的项目 doc.id 并提供所需的输出。

const orders = [];
snapshot.docs.map((doc) => {
    const items = []
    doc.data().items.forEach((item) => {
        items.push(`${item.productName}(${item.qty})`);
    });
    orders.push({
        "Order ID": doc.id,
        Items: items
    })
});

如何在一列中显示这些项目数组？

How can I display these array of items in one column?

javascript

firebase

reactjs

google-cloud-firestore

mui-datatable