React从API对象数组提取数据存变量时遇undefined错误求助

核心错误点 #

• 重复解析响应流：response.json()只能调用一次，第二次调用时响应流已被耗尽，会返回空数据或报错。
• 数据路径匹配错误：API返回的目标配送选项在jsonResponse.deliveries[0].options，而非jsonResponse.options。
• useEffect无限循环：未设置依赖数组，组件每次渲染都会触发API调用。
• 数据提取逻辑错误：原代码的map操作路径错误，导致无法正确获取start/end/price等字段。

修正后的完整代码 #

// 调用API：添加依赖数组，避免无限循环
useEffect(() => {
  setDeliveryOptions(cartItems, checkoutState);
}, [cartItems, checkoutState]); // 根据实际业务需求添加依赖项

async function setDeliveryOptions(cartItems, checkoutState) {
  try {
    const response = await authFetch({
      url: `apiURL`,
      method: 'POST',
      body: JSON.stringify(orderBody),
    });

    // 仅解析一次响应，避免响应流耗尽
    const jsonResponse = await response.json();
    console.log('API响应:', jsonResponse);

    // 先检查响应数据是否合法，避免后续报错
    if (!jsonResponse.deliveries || jsonResponse.deliveries.length === 0) {
      console.log('无可用配送选项数据');
      return;
    }

    // 正确定位到目标配送选项数组
    const deliveryOptions = jsonResponse.deliveries[0].options;
    console.log('配送选项详情:', deliveryOptions);

    // 一次性提取所需字段，格式化数据
    const formattedDeliveryData = deliveryOptions.map(option => ({
      type: option.type,
      start: option.start,
      end: option.end,
      price: option.price
    }));

    // 如果需要单独提取成字段数组，可直接基于格式化数据处理
    const types = formattedDeliveryData.map(item => item.type);
    const starts = formattedDeliveryData.map(item => item.start);
    const ends = formattedDeliveryData.map(item => item.end);
    const prices = formattedDeliveryData.map(item => item.price);

    console.log('格式化后的数据:', formattedDeliveryData);
    console.log('配送类型数组:', types);
    console.log('配送开始时间数组:', starts);
    console.log('配送结束时间数组:', ends);
    console.log('配送价格数组:', prices);

    // 这里可以将格式化后的数据存入组件state，用于页面渲染
    // setDeliveryData(formattedDeliveryData);
  } catch (error) {
    console.error('获取配送选项失败:', error);
  }
}

关键说明 #

• 响应解析规范：严格保证仅调用一次response.json()，防止数据丢失或异常。
• 空值防御：添加响应数据的存在性检查，避免因API返回异常导致的undefined报错。
• 路径精准匹配：完全贴合API返回的结构，从deliveries[0].options提取目标数据。
• useEffect优化：通过依赖数组控制API调用时机，彻底解决无限循环问题。
• 数据提取简化：直接遍历目标选项数组，一次性完成字段提取，逻辑清晰且不易出错。

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