如何防范 JSX 中未定義的 API 調用值？

Question

我有一個組件可以進行 API 調用並返回一些財務數據集為 state，如下所示：

      const [statisticsData, setStatisticsData] = useState({});

效果很好，但是，API 並不總是擁有我需要顯示的所有數據。 嘗試渲染 JSX 的基本示例：

    <StatBox
        statType="PE Ratio"
        statValue={statisticsData.summaryDetail.PERatio.fmt}
      />

當 PE 比率由 API 調用定義時，組件呈現完美，但是 API 並不總是產生 PE 比率。 我嘗試使用三元運算符來檢查是否定義了statisticsData.summaryDetail.PERatio.fmt ，但這不起作用。 我什至無法獲得 typeof statisticsData.summaryDetail.PERatio.fmt因為它會引發運行時錯誤說

'TypeError：無法讀取未定義的屬性'fmt'。

如果未定義的值在我檢查它是否未定義之前引發運行時錯誤，我該如何防范未定義的值？

Answer 1

在這種情況下，像下面這樣重構組件

<StatBox
    statType="PE Ratio"
    statValue={statisticsData?.summaryDetail?.PERatio?.fmt ?? null}
/>

?? 是一個運算符，它標識左側是否未定義，然后返回右側。 因此未定義fmt或PERatio它將通過null 。 現在相應地處理組件內的 null 值，或者根據需要傳遞任何默認值。

Answer 2

<StatBox
    statType="PE Ratio"
    statValue={statisticsData?.summaryDetail?.PERatio?.fmt}
/>

? 操作員檢查該值是否存在然后它進入 object 否則返回 undefined不需要？ null

在您的示例中 statisticsData?.summaryDetail 如果 'statisticsData' 是 null 那么它不會 go 到 'summaryDetail' 如果它存在，那么它將是 Z34D1F91FB2E514B8576FABPERA75A 等等。