React useEffect中链式调用异步方法：电商结账数据更新报错求助

问题核心 #

你遇到的TypeError: Cannot read properties of null (reading 'id')和异步依赖问题，本质是两个原因：

• 未提前校验checkout_token的有效性，导致读取id时可能遇到null
• 原方法调用是异步的，状态不会立刻更新，后续方法直接读取旧状态自然拿不到数据

解决方案 #

方案1：改造方法为Promise返回，用async/await链式执行 #

先把所有更新配送数据的方法改成返回Promise，这样可以用async/await保证顺序执行：

// 改造setShippingCountries，返回Promise并携带结果
const setShippingCountries = (tokenId) => {
  return commerce.services
    .localeListShippingCountries(tokenId)
    .then((countries) => {
      dispatch({
        type: ACTIONS.SET_SHIPPING_COUNTRIES,
        countries,
      });
      return countries; // 返回数据供后续步骤使用
    })
    .catch(err => {
      console.error('获取配送国家失败:', err);
      throw err; // 抛出错误让上层捕获
    });
};

// 同理改造setSubdivisions
const setSubdivisions = (countryCode) => {
  return commerce.services
    .localeListSubdivisions(countryCode)
    .then((subdivisions) => {
      dispatch({
        type: ACTIONS.SET_SHIPPING_SUBDIVISIONS,
        subdivisions,
      });
      return subdivisions;
    })
    .catch(err => {
      console.error('获取地区失败:', err);
      throw err;
    });
};

// 改造setShippingOptions
const setShippingOptions = (tokenId, countryCode, subdivisionCode) => {
  return commerce.checkout
    .getShippingOptions(tokenId, { country: countryCode, region: subdivisionCode })
    .then((shippingOptions) => {
      dispatch({
        type: ACTIONS.SET_SHIPPING_OPTIONS,
        shippingOptions,
      });
      return shippingOptions;
    })
    .catch(err => {
      console.error('获取配送选项失败:', err);
      throw err;
    });
};

然后修改useEffect，加入有效性校验并使用async/await：

useEffect(() => {
  // 跳过首次挂载
  if (!isMounted.current) {
    isMounted.current = true;
    return;
  }

  // 提前校验checkout_token是否有效
  const tokenId = state.checkout_token?.id;
  if (!tokenId) return;

  const updateShippingChain = async () => {
    try {
      // 1. 获取配送国家
      const countries = await setShippingCountries(tokenId);
      const firstCountryCode = Object.keys(countries)[0]; // 根据Commerce.js返回结构调整，若为数组则用countries[0]?.code
      if (!firstCountryCode) return;

      // 2. 根据国家获取地区
      const subdivisions = await setSubdivisions(firstCountryCode);
      const firstSubdivisionCode = Object.keys(subdivisions)[0]; // 同理调整结构
      if (!firstSubdivisionCode) return;

      // 3. 根据国家+地区获取配送选项
      await setShippingOptions(tokenId, firstCountryCode, firstSubdivisionCode);
    } catch (err) {
      console.error('配送数据更新失败:', err);
    }
  };

  updateShippingChain();
}, [state.checkout_token.id]);

方案2：拆分多个useEffect，依赖对应状态更新 #

这种方式更贴合React的数据流，利用状态变化自动触发后续操作：

// 当checkout_token更新时，拉取配送国家
useEffect(() => {
  if (!isMounted.current) {
    isMounted.current = true;
    return;
  }
  const tokenId = state.checkout_token?.id;
  if (tokenId) {
    setShippingCountries(tokenId);
  }
}, [state.checkout_token.id]);

// 当配送国家更新时，拉取对应地区
useEffect(() => {
  const countries = state.order_data.fulfillment.shipping_countries;
  const firstCountryCode = Object.keys(countries)[0];
  if (firstCountryCode) {
    setSubdivisions(firstCountryCode);
  }
}, [state.order_data.fulfillment.shipping_countries]);

// 当地区更新时，拉取配送选项
useEffect(() => {
  const tokenId = state.checkout_token?.id;
  const countries = state.order_data.fulfillment.shipping_countries;
  const subdivisions = state.order_data.fulfillment.shipping_subdivisions;
  const firstCountryCode = Object.keys(countries)[0];
  const firstSubdivisionCode = Object.keys(subdivisions)[0];

  if (tokenId && firstCountryCode && firstSubdivisionCode) {
    setShippingOptions(tokenId, firstCountryCode, firstSubdivisionCode);
  }
}, [state.checkout_token.id, state.order_data.fulfillment.shipping_subdivisions]);

关键注意点 #

• 始终用可选链操作符?.校验嵌套对象的有效性，避免null/undefined读取属性报错
• 根据Commerce.js实际返回的数据结构调整firstCountryCode、firstSubdivisionCode的获取方式（比如返回的是数组还是键值对）
• 加入错误捕获，避免某个步骤失败导致后续流程卡死

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