React条件渲染中如何用可选链改写深层嵌套三元取值代码

直接给出改写后的代码：

eventsubcategoryvalue: data?.body?.spending?.requestspend === 'y'
  ? data?.body?.spending?.allowspend
  : chargeamount

改写说明 #

• 可选链操作符?.的核心作用是：当属性访问链路中任意一级节点为null或undefined时，会直接短路返回undefined，不会触发「无法读取null/undefined的属性」这类运行时报错，完全适配多层嵌套对象取值的场景。
• 改写时不需要调整原有三元判断的核心逻辑，只需要把原代码中连续的.属性访问，对可能不存在的层级替换为?.即可：
  • 原判断路径data.body.spending.requestspend替换为data?.body?.spending?.requestspend
  • 原真值分支取值路径data.body.spending.allowspend替换为data?.body?.spending?.allowspend
• 如果需要避免链路断裂时返回undefined，可以搭配空值合并运算符??设置兜底默认值，示例：

eventsubcategoryvalue: data?.body?.spending?.requestspend === 'y'
  ? data?.body?.spending?.allowspend ?? 0
  : chargeamount

提示：如果项目中通过TS类型约束、接口契约已经明确保证data、data.body、data.body.spending这几个层级必定存在，只需要给你不确定是否存在的层级加?.即可，不需要每一层都添加。

内容的提问来源于stack exchange，提问作者Jelly