调用DummyJSON API时出现React错误边界提示，如何修复？

问题根源 #

1. 接口数据结构解析错误：DummyJSON的/products接口返回的是包含products数组的对象（格式类似{ products: [...], total: 100, ... }），你直接把整个响应对象赋值给product状态，初始状态是数组，后续product变成对象后调用map方法就会触发错误。
2. 渲染取值逻辑错误：你试图访问item.products.brand，但item本身就是products数组里的单个产品对象，应该直接取item.brand。
3. 缺少请求错误处理：未捕获请求过程中可能出现的异常，导致错误扩散触发React的错误边界提示。

修复后的代码 #

import React, { useState, useEffect } from "react";

const BASE_URL = "https://dummyjson.com/products";

export default function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch(BASE_URL)
      .then((res) => {
        if (!res.ok) throw new Error('请求失败');
        return res.json();
      })
      .then((data) => {
        // 取接口返回的products数组赋值给状态
        setProducts(data.products);
      })
      .catch((err) => {
        // 捕获并处理请求错误
        console.error('获取产品数据失败:', err);
      });
  }, []);

  return (
    <ul>
      {products.map((item) => (
        <li key={item.id}>
          {/* 直接访问产品的brand字段 */}
          {item.brand}
        </li>
      ))}
    </ul>
  );
}

关键修改点 #

• 状态变量名改为products（语义更清晰），初始值保持数组类型。
• 请求成功后，将data.products（接口返回的产品数组）赋值给状态，而非整个响应对象。
• 渲染时直接使用item.brand获取品牌信息，修正取值路径。
• 添加响应状态检查和catch块处理请求错误，避免异常导致组件崩溃。

内容的提问来源于stack exchange，提问作者Vinh Nguyễn