为什么我在此可选链中收到“对象可能是‘未定义’”？

Question

我去那儿：

buyTicketData?.pricingOptions

这个错误：

[tsl] ERROR in /Applications/MAMP/htdocs/wp-content/plugins/tikex/tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx(280,25)
      TS2532: Object is possibly 'undefined'.

如果左侧?未定义，?则将其包裹起来，为什么这很重要？

以下是类型：

buyTicketData?: BuyTicketData;

export type BuyTicketData = {
  pricingOptions?: PricingOptions;
}

export type PricingOptions = {
  [optionId: string]: PricingOptionType;
};

export type PricingOptionType = {
  invoiceItems?: InvoiceItems;
};

export type InvoiceItems = {
  [invoiceItemId: string]: InvoiceItemData;
};

export type InvoiceItemData = {
  defaultValue?: number;
};

无论如何，这就是整个表达式

buyTicketData?.pricingOptions

---

好的，找到解决方案：

[tsl] ERROR in /Applications/MAMP/htdocs/wp-content/plugins/tikex/tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx(280,25)
      TS2532: Object is possibly 'undefined'.

我只是不知道为什么?? ""需要这种丑陋的条件。

Answer 1

如果a是undefined，则在解析a.b为时抛出异常。您仍然需要处理.a?.bundefinedundefined

buyTicketData?.pricingOptions?.[startPaymentIn?.pricingOptionId]

决心

buyTicketData?.pricingOptions?.[undefined]

如果startPaymentIn是undefined。这会引发错误，因为undefined不能是密钥。

更好的方法是，如果此变量是必需的，则在所有内容之前进行空检查，这样您就?.根本不需要。

if(startPaymentIn)
{
    //no need to use ?. on startPayment
}