React调用fetch获取API返回的Promise数据时访问products为undefined如何解决

核心问题 #

• 你当前的代码只在请求回调中打印了接口返回数据，没有将数据存入products状态，因此products.data一直是初始值null，访问自然返回undefined
• 没有完整处理fetch的异步Promise链，也没有补充请求异常的捕获逻辑

修正后的完整代码 #

import { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState({
    loading: false,
    data: null,
    error: false,
  });

  const apiLink = 'https://example.com/api/checkout/products/';

  useEffect(() => {
    // 避免内存泄露，组件卸载时终止请求
    const controller = new AbortController();

    const fetchProducts = async () => {
      setProducts({
        loading: true,
        data: null,
        error: false,
      });
      try {
        const response = await fetch(apiLink, {
          method: 'POST',
          signal: controller.signal,
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            "categories": ["13", "14", "4", "8"]
          })
        });
        if (!response.ok) throw new Error('请求异常');
        const resData = await response.json();
        // 将返回数据存入状态
        setProducts({
          loading: false,
          data: resData,
          error: false
        });
      } catch (err) {
        if (err.name !== 'AbortError') {
          setProducts({
            loading: false,
            data: null,
            error: true
          });
        }
      }
    };

    fetchProducts();
    // 组件卸载终止请求
    return () => controller.abort();
  }, [apiLink]);

  // 页面渲染逻辑
  return (
    <div>
      {/* 加载状态 */}
      {products.loading && <p>商品加载中...</p>}
      {/* 错误状态 */}
      {products.error && <p>商品加载失败，请稍后重试</p>}
      {/* 数据存在时遍历渲染 */}
      {products.data?.products?.length > 0 && (
        <ul>
          {products.data.products.map(item => (
            <li key={item.id}>
              {/* 这里替换为你需要展示的商品字段，比如商品名、价格 */}
              <p>商品名：{item.name}</p>
              <p>价格：{item.price}</p>
            </li>
          ))}
        </ul>
      )}
      {/* 无数据提示 */}
      {products.data && !products.data?.products?.length && <p>暂无对应商品</p>}
    </div>
  )
}

关键修改说明 #

• 补充了fetch请求的Content-Type请求头，避免后端无法识别JSON格式的请求体
• 使用async/await简化Promise的异步处理逻辑，将接口返回的完整数据存入products状态的data字段
• 新增了请求异常捕获逻辑，请求失败时会标记error状态
• 渲染前增加了多重状态判断，避免数据还没返回时就访问字段导致报错，可选链?.可以避免层级访问时的undefined报错

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