使用打字稿进行条件渲染-

Question

当试图有条件地渲染数据结构中的某些内容时，我希望该元素在数据集中存在记录的情况下显示，但在没有记录的情况下不显示。我的尝试是这样的：

// other code...

{patient.address[0]
    ? patient.address[0].line[0]
    : null}

// other code...

这适用于存在该字段但不存在该字段的实例-我收到“ TypeError：无法读取未定义的属性'0'”。

我认为问题在于，当尝试访问.address [0]时，由于在数据集上不存在条件数组而无法输入条件时，将引发错误。我该如何修改解决方法？

Answer 1

您可以使用几个问号：

patient?.address?.[0]?.line?.[0];

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining

Answer 2

您可以用不同的方式检查

• 使用如下所示的可选链接，您可以了解有关可选链接here
的更多信息

{patient?.address?.[0]?.line?.[0] ?? null}

• 通过使用以下默认值

{((patient || {}).address || [])[0]
    ? ((((patient || {}).address || [])[0]).line || [])[0]
    : null}

以上的简化版本

let address = ((patient || {}).address || [])[0]
{ address ? (address.line || [])[0] : null}

Answer 3

使用这种短路方法：

patient?.address?.0?.line && patient.address[0].line[0]