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

Question

我有一个组件可以进行 API 调用和 returns 一些财务数据设置为如下状态：

      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: Cannot read property 'fmt' of undefined'.

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

Answer 1

在这种情况下重构组件如下所示

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

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

Answer 2

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

？ operator 检查值是否存在，然后它进入对象内部，否则 return undefined 不需要 ??空

in your example statisticsData?.summaryDetail if 'statisticsData' is null then it wont go to 'summaryDetail' if it exists then it will go 'PERatio' and so on.

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

How to guard against an undefined API call value in JSX?

javascript

reactjs

jsx

undefined