React页面重渲染后报TypeError:Cannot read property of undefined如何解决？

问题根因 #

报错本质是访问了不存在的对象属性，触发原因有两个：

• props.orders是数组类型，本身没有status属性，只有数组内的元素才有该属性，因此直接写props.orders.status无法拿到值
• 页面渲染/重渲染的某个时间节点，props.orders可能是undefined/null，或者是空数组，此时直接访问props.orders[0].status相当于读取undefined的status属性，就会抛出报错。

解决方案 #

方法1：使用可选链操作符（最简便） #

直接用ES6的可选链?.做安全访问，当前面的属性不存在时会直接终止属性访问，不会抛出报错：

{props.orders?.[0]?.status === "open" && (
  <Button
    variant="dark"
    style={{
      fontSize: "13px",
      marginRight: 10,
      marginBottom: 15,
    }}
    onClick={(e) => updateStatusHandler(e, "paid")}
  >
    <motion.div
      whileHover={{ scale: 1.06 }}
      whileTap={{ scale: 0.9 }}
    >
      &nbsp;Konfirmasi Pembayaran
    </motion.div>
  </Button>
)}

方法2：增加前置条件判断 #

如果需要更明确的逻辑控制，可以先校验orders的合法性再访问属性：

{
  // 先判断orders存在，且长度大于0，再访问内部属性
  props.orders 
  && props.orders.length > 0 
  && props.orders[0].status === "open" 
  && (
    // 按钮代码保持不变
  )
}

额外优化建议 #

• 如果orders是异步接口返回的数据，可以在父组件加加载态，等orders拿到有效值后再渲染OrderActionModal组件，从根源避免空值场景
• 可以给子组件的orders props设置默认值为空数组，进一步降低空值风险：比如子组件声明时写const OrderActionModal = ({orders = []}) => { /* 组件逻辑 */ }

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