React中API响应存入state后渲染报错，本地变量正常的问题求助

错误原因分析 #

1. 初始状态缺失导致的渲染时序问题
   组件初始化时products是空对象{}，第一次渲染时products.items为undefined，此时直接访问products.items.total_results或products.items.item就会抛出属性未定义的错误。而本地变量是预先定义好的完整结构，不存在初始值缺失的问题。

2. 错误的数组转换逻辑
   Array(products.items)是冗余且错误的用法：products.items本身是一个包含total_results和item数组的对象，用Array()包裹会把它变成单元素数组，后续的map操作完全没必要，还会增加逻辑复杂度。

修复方案 #

方案1：设置匹配API结构的初始状态 #

给useState设置与API返回结构一致的初始值，避免第一次渲染时出现属性不存在的情况：

const [products, setProducts] = useState({
  items: {
    total_results: 0,
    item: []
  }
});

方案2：使用可选链操作符做安全访问 #

在渲染时通过?.判断属性是否存在，防止报错：

<div className="row hotDealProduct">
  {/* 先判断items是否存在，再渲染内容 */}
  {products.items && (
    <div className="col-lg-3 col-md-4 col-sm-6 col-6">
      <span>Total: {products.items.total_results}</span>
      {/* 确保item是数组后再执行map */}
      {(products.items.item || []).map((val) => (
        <>
          <div className="productImage">
            <img
              style={{ height: "100%", width: "100%" }}
              src={val.pic_url}
              alt={val.title}
            />
          </div>
          <Link
            to="/"
            style={{ textDecoration: "none", color: "#1a1a1a" }}
          >
            <div className="cardDetail">
              <div>
                <p>{val.title}</p>
              </div>
              <div>
                <h6>¥ {val.price}</h6>
              </div>
              <div>
                <h6>{val.sales}</h6>
              </div>
            </div>
          </Link>
        </>
      ))}
    </div>
  )}
</div>

方案3：添加加载状态控制渲染 #

增加加载状态，在API请求完成前显示加载提示，避免渲染未就绪的数据：

const Home = () => {
  const [products, setProducts] = useState({ items: { item: [] } });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    storeProducts();
  }, []);

  const storeProducts = async () => {
    const url = "https://api.oneb.cn/1688/item_search/?q=男鞋&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=40";
    try {
      const response = await fetch(url);
      const data = await response.json();
      setProducts(data);
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div className="row hotDealProduct">
      <div className="col-lg-3 col-md-4 col-sm-6 col-6">
        <span>Total: {products.items.total_results}</span>
        {products.items.item.map((val) => (
          // 产品卡片渲染内容
        ))}
      </div>
    </div>
  );
};

额外注意点 #

确认API返回的完整结构：如果接口返回的直接是items对象，而非包含items的外层对象，需要修改状态赋值逻辑为setProducts({ items: data })，确保状态结构与渲染逻辑匹配。

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