Javascript 如何防范JSX中未定义的API调用值？

我有一个组件，它进行API调用并返回一些财务数据集作为状态，如下所示：

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

但是，API并不总是具有我需要显示的所有数据，这一点非常好。试图呈现JSX的一个基本示例：

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

当PE比率由API调用定义时，组件呈现得非常完美，但是API并不总是生成PE比率。我曾尝试使用三元运算符检查是否定义了

statisticsData.summaryDetail.PERatio.fmt

，但这不起作用。我甚至不能得到statisticsData.summaryDetail.PERatio.fmt的类型，因为它抛出了一个运行时错误

'TypeError:无法读取未定义的属性'fmt'

---

如果未定义的值在我检查是否未定义之前抛出运行时错误，我如何防止未定义的值呢？

在这种情况下，像下面这样重构组件

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

---

？是一个运算符，用于识别左手侧是否未定义，然后返回右手侧。因此，未定义fmt或PERatio，它将通过null。现在，相应地处理组件内部的空值，或者如果需要，传递任何默认值。

在本例中，像下面那样重构组件

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

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

？是一个运算符，用于识别左手侧是否未定义，然后返回右手侧。因此，未定义fmt或PERatio，它将通过null。现在，相应地处理组件内部的空值，或者根据需要传递任何默认值。

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

？运算符检查该值是否存在，然后它进入对象内部，否则返回未定义的不需要？？空

在您的示例statisticsData？.summaryDetail中，如果“statisticsData”为 空，则不会转到“summaryDetail”，如果存在，则会转到 “PERatio”等等

？运算符检查该值是否存在，然后它进入对象内部，否则返回未定义的不需要？？空

在您的示例statisticsData？.summaryDetail中，如果“statisticsData”为 空，则不会转到“summaryDetail”，如果存在，则会转到 “PERatio”等等

---

有时，我们可能需要将默认值传递给组件，这就是为什么向他展示了如何在未定义的链接上传递其他值的示例，如果没有值，则不会返回null。它返回未定义的

。所以我们需要使用
？？
。有了您的解决方案，作者必须这样做
const StatsBox=（{statValue=null}）=>
有时我们可能需要将默认值传递给组件，这就是为什么向他展示了如何在未定义的链接上传递其他值的示例，如果没有值，则不会返回null。它返回未定义的
。所以我们需要使用
？？
。在您的解决方案就位后，作者必须执行此操作
const StatsBox=（{statValue=null}）=>