如何防范 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 等等。