React电商开发时AddressForm.jsx出现读取checkoutToken.id的TypeError

问题根因 #

报错的核心原因是组件首次挂载执行useEffect回调时，checkoutToken的值为null，读取null.id触发了类型错误。通常是因为checkoutToken来自异步请求结果、上层props或者全局状态，组件初始化时还没完成赋值，初始值为null。

解决方案 #

以下三种方案可根据你的代码场景选择，推荐搭配使用避免边界问题：

• 方案1：给useEffect补充依赖和非空判断
  把checkoutToken加入依赖数组，同时加可选链做防御性判断，确保有值后再执行请求：

  useEffect(() => {
    if (checkoutToken?.id) {
      fetchShippingCountries(checkoutToken.id);
    }
  }, [checkoutToken]);
  

• 方案2：父组件增加条件渲染
  在渲染AddressForm的父组件位置加判断，仅当checkoutToken存在时才挂载组件，从根源避免空值场景：

  {/* 父组件对应渲染位置 */}
  {checkoutToken && <AddressForm checkoutToken={checkoutToken} />}
  

• 方案3：给checkoutToken设置默认值兜底
  如果checkoutToken是组件入参props，可设置默认空对象，避免空值报错：

  // AddressForm组件参数定义处
  const AddressForm = ({ checkoutToken = {} }) => {
    // 组件内部逻辑
  }
  

内容的提问来源于stack exchange，提问作者Udit Narayan Soni