如何更新类组件中的状态？

Question

我有这些代码可以在表格中显示所有挂单。单击“确认”按钮后，将更新状态，仅加载挂单。我唯一的问题是，除非我转到另一个页面，然后我必须返回待处理订单页面才能查看更新后的状态，否则状态不会更新。

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

  columns = [
    "Order ID",
    {
      name: "Confirm",
      options: {
        filter: true,
        sort: false,
        empty: true,
        customBodyRender: (
          value,
          tableMeta,
        ) => {
          return (
            <FormControlLabel
              value={value}
              control={
                <Button value={value} color="secondary" variant="primary">
                  confirm
                </Button>
              }
              onClick={(e) => {
                try {
                  firestore.collection("orders").doc(tableMeta.rowData[0]).set(
                    {
                      orderStatus: "Confirmed",
                    },
                    { merge: true }
                  );
                } catch (err) {
                  console.log(err);
                }
              }}
            />
          );
        },
      },
    },
   

  componentDidMount() {
    try {
      firestore
        .collection("orders")
        .where("orderStatus", "==", "Pending")
        .get()
        .then((snapshot) => {
          const orders = [];
          snapshot.docs.map((doc) => {
            const items = [];
            orders.push({
            const items = [];
            doc.data().items.forEach((item) => {
              items.push(`${item.productName}(${item.qty}),`);
            });
           const data = doc.data();
            orders.push({
          "Order ID": doc.id,
           "Items":items,
            });
          });
          this.setState({ orders: orders });
          // console.log(this.state.orders);
        });
    } catch (err) {
      console.log(err);
    }
  }

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

我已经发现了错误。我没有使用.get() 和.then()，而是将其更改为onSnapshot，它已经可以使用了。

 componentDidMount() {
        try {
          firestore
            .collection("orders")
            .where("orderStatus", "==", "Pending")
            .onSnapshot((snapshot) => {
              const orders = [];
              snapshot.docs.map((doc) => {
                const items = [];
                orders.push({
                const items = [];
                doc.data().items.forEach((item) => {
                  items.push(`${item.productName}(${item.qty}),`);
                });
               const data = doc.data();
                orders.push({
              "Order ID": doc.id,
               "Items":items,
                });
              });
              this.setState({ orders: orders });
              // console.log(this.state.orders);
            });
        } catch (err) {
          console.log(err);
        }
      }

Answer 1

您应该直接更新状态...

this.setState(prevState => {orders: [...prevState.orders, data]})

Answer 2

您没有将数据附加到新订单数组中。你的代码：

snapshot.docs.map((doc) => {
  const items = [];
  const data = doc.data();
  orders.push({
  });
});

应该是什么：

snapshot.docs.map((doc) => {
  const items = [];
  const data = doc.data();
  // Append data to the array, or the right keys if you don't want the whole data
  orders.push(data);
});