javascript - 为什么我在这个可选链中收到 "Object is possibly ' undefined'"？

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;
};

这就是整个表达式

<select
value={
startPaymentIn?.invoiceItems?.[key] != undefined
  ? startPaymentIn?.invoiceItems?.[key] == 1
    ? "Igen"
    : "Nem"
  : startPaymentIn?.pricingOptionId &&
    buyTicketData?.pricingOptions?.[ // <-- here
      startPaymentIn!.pricingOptionId!
    ].invoiceItems[key]?.defaultValue != undefined
  ? startPaymentIn?.pricingOptionId &&
    buyTicketData?.pricingOptions?.[
      startPaymentIn!.pricingOptionId!
    ].invoiceItems[key]?.defaultValue == 1
    ? "Igen"
    : "Nem"
  : undefined
}

---

好的，找到解决方案:

value={
  startPaymentIn?.invoiceItems?.[key] != undefined
    ? startPaymentIn?.invoiceItems?.[key] == 1
      ? "Igen"
      : "Nem"
    : buyTicketData?.pricingOptions?.[
        startPaymentIn?.pricingOptionId ?? ""
      ]?.invoiceItems?.[key]?.defaultValue != undefined
    ? buyTicketData?.pricingOptions?.[
        startPaymentIn?.pricingOptionId ?? ""
      ]?.invoiceItems?.[key]?.defaultValue == 1
      ? "Igen"
      : "Nem"
    : undefined
}

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

Answer 1

如果 a 为 undefined，则 a.b 会抛出异常，而 a?.b 则解析为 undefined 。您仍然需要处理未定义。

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

决定

buyTicketData?.pricingOptions?.[undefined]

如果startPaymentIn是未定义。这会引发错误，因为 undefined 不能是键。

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

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