如何修复React报错：Objects are not valid as a React child

API 探路者

2026-9-2

问题根因

你在接口回调里校验initialItemCount是数组，只能说明赋值入参的类型没问题，报错和setItemsInCart这个调用动作本身无关，触发点在渲染阶段，核心原因是你执行列表遍历的时候，拿到的遍历目标不是数组类型，常见诱因有三个：

时序问题：React组件首次渲染发生在useEffect执行之前，这时候itemsInCart是你定义的初始空数组，本身遍历不会报错。但如果你写JSX时写错了取值路径，比如遍历的是itemsInCart.xxx这类不存在的属性，首次渲染时这个值是undefined，遍历undefined就会触发“需使用数组渲染子元素集合”的报错。等接口返回赋值后你在回调里打log看到值是对的，很容易误判是赋值阶段出的问题。
缺少异常兜底：你现在的请求逻辑没有加catch错误捕获，一旦fetch请求失败、接口返回格式异常、JSON解析报错，就不会走到正常赋值的分支，极端情况下会导致state被更新为非数组类型。
语法混写风险：同时用async/await和.then链时，如果没有正确返回值，可能出现await拿到的结果不符合预期的问题，带来状态赋值的时序异常。

修复步骤

先重构请求逻辑，统一语法、加类型兜底和错误捕获，保证itemsInCart在任何情况下都是数组类型：

const [itemsInCart, setItemsInCart] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch("https://fakestoreapi.com/products?limit=16");
      const data = await res.json();
      const initialItemCount = data.map((item) => ({
        name: item.title,
        qty: 0,
      }));
      // 双重校验，确认是数组再更新state，否则兜底空数组
      setItemsInCart(Array.isArray(initialItemCount) ? initialItemCount : []);
    } catch (err) {
      console.error('商品数据拉取失败', err);
      // 异常场景下也要保证state是数组，避免渲染报错
      setItemsInCart([]);
    }
  };

  fetchData();
}, []);

检查列表渲染逻辑，确保遍历目标直接是itemsInCart本身，不要写错取值路径，同时给列表项加唯一key，参考正确写法：

// 高频错误写法避坑
// 1. 遍历不存在的属性：{itemsInCart.goods.map(...)}
// 2. 直接渲染对象：{itemsInCart.map(item => <div>{item}</div>)}
// 3. 忘记加key属性

// 正确写法
{
  itemsInCart.map((item, index) => (
    <div key={`${item.name}-${index}`}>
      <p>商品名称：{item.name}</p>
      <p>购买数量：{item.qty}</p>
    </div>
  ))
}

定位渲染阶段的类型问题：不要只在接口回调里打log，把类型校验的log放在组件return之前，查看每次渲染时itemsInCart的实际类型，就能快速定位是不是取值路径写错了：

// 放在组件return语句前，监控每次渲染的state类型
console.log('渲染时itemsInCart是否为数组：', Array.isArray(itemsInCart), itemsInCart);

排查提示：如果你在组件其他位置有更新itemsInCart的逻辑，也要同步检查是不是存在传入非数组值的情况。

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