我可以在 componentDidMount 中有条件语句吗？答案

【问题标题】：Can I have a conditional statement inside the componentDidMount?我可以在 componentDidMount 中有条件语句吗？
【发布时间】：2021-08-03 13:33:50
【问题描述】：

有没有办法可以在 componentDidmount 中设置条件语句，如果付款方式是卡，它将显示卡号？我正在使用一个多数据表

  componentDidMount() {
    try {
      firestore
        .collection("orders")
        .onSnapshot((snapshot) => {
          const orders = [];
            const data = doc.data();
            orders.push({
              "Order ID": doc.id,
              "Payment method": data.paymentMethod.toUpperCase(),
                {data.paymentMethod == "card" ? (
            
                ): (

             )},
               });
          });
          this.setState({ orders: orders });
        });
    } catch (err) {
      console.log(err);
    }
  }


render() {
    return this.state.orders ? (
      <div>
        <MUIDataTable
          title={"Preparing"}
          columns={this.columns}
          data={this.state.orders}
          options={this.options}
        />
      </div>
    ) : (
      <p>Loading...</p>
    );
  }
}

【问题讨论】：

“显示卡号”是什么意思？你的意思是渲染输出吗？
@evolutionxbox 是
使用状态？设置然后在渲染中显示的东西？请您也向我们展示您的渲染方法。
@evolutionxbox 已经编辑过了
支付方式为“卡”时，你想显示什么？

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

【解决方案1】：

如果您想拥有可选的对象属性，您可以在对象内部使用三元运算符(a ? b : c) 传递条件语句，您需要使用扩展运算符来实现。

orders.push({
  "Order ID": doc.id,
  "Payment method": data.paymentMethod.toUpperCase(),
  ...(data.paymentMethod == "card" ? { "Payment card": 1234 } : {}),
});

或者使用&&的更简单的方法：

orders.push({
  "Order ID": doc.id,
  "Payment method": data.paymentMethod.toUpperCase(),
  ...(data.paymentMethod == "card" && { "Payment card": 1234 }),
});

【讨论】：