ReactJS点击更新按钮报TypeError: 无法读取undefined的store_address属性如何解决

你当前的校验逻辑仅判断了cart_product数组的存在性和长度，没有覆盖深层字段的存在性校验。点击更新按钮触发Redux的cart数据更新时，更新后的cart_product数组第一项的vendor字段为undefined，此时直接读取vendor.store_address就会触发该报错。
刷新页面后恢复正常是因为刷新会重新拉取全量的cart接口数据，此时返回的结构中vendor字段是完整存在的，局部更新的action逻辑存在字段遗漏。

1. 前端加兜底校验（优先做，避免页面崩溃） #

使用可选链运算符做层级安全校验，代码修改如下：

let cart_product_item = this.props.cart_product;
return (
  cart_product_item?.length > 0 ? cart_product_item[0]?.vendor?.store_address ?? null : null
)

如果你的项目环境不支持可选链语法，可以改为全量手动校验：

let cart_product_item = this.props.cart_product;
return (
  cart_product_item && 
  cart_product_item.length > 0 && 
  cart_product_item[0] && 
  cart_product_item[0].vendor ? 
  cart_product_item[0].vendor.store_address : null
)

2. 修复数据源问题（根本解决） #

检查点击更新按钮触发的myCart相关action逻辑，确认局部更新cart数据时，是否遗漏了vendor字段的赋值，保证Redux中存储的cart每一项的结构和全量接口返回的结构一致即可彻底避免该问题。

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