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

【问题标题】：How can I display these array of items in one column?如何在一列中显示这些项目数组？
【发布时间】：2021-07-30 21:37:27
【问题描述】：

这是我从 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”在数组中：

【问题讨论】：

console.log() 您的订单，您的订单数组似乎有 2 行。
如果您不希望“项目”位于不同的“订单”行中，为什么要单独添加每个“项目”作为订单？只是....不要那样做？
@RahulKumar 我已经编辑过了
@Chase My Items in the firestore 在数组中，是否可以在不映射的情况下获取项目？
我的意思是，您将数据作为“订单”获取，并最终合并您想要的项目。您明确地想将其更改为“项目”列表，而不是订单。只需将其保留为来自数据库的形状，其中每个订单已经包含其各自的项目。

标签： javascript reactjs firebase google-cloud-firestore mui-datatable

【解决方案1】：

用下面的代码 sn-p 替换 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
    })
});

【讨论】：