如何修复错误：对象作为 React 子对象无效。如果您打算渲染一组孩子，请改用数组答案

【问题标题】：How to fix error: Objects are not valid as a React child. If you meant to render a collection of children, use an array instead如何修复错误：对象作为 React 子对象无效。如果您打算渲染一组孩子，请改用数组
【发布时间】：2022-06-11 05:20:04
【问题描述】：

我正在尝试使用一组对象设置状态，但出现上述错误，我不知道如何解决。

我的代码：

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

  useEffect(() => {
    const fetchData = async () => {
      await fetch("https://fakestoreapi.com/products?limit=16")
        .then((res) => res.json())
        .then((data) => {
          const initialItemCount = data.map((item) => {
            return {
              name: item.title,
              qty: 0,
            };
          });
          setItemsInCart(initialItemCount);
        });
    };

    fetchData();
  }, []);

我尝试console.log(Array.isArray(initialItemCount)) 来检查它是否是一个数组并且它返回true。那么为什么说使用数组呢？谢谢

【问题讨论】：

如何呈现这些数据？该错误表明您正在尝试在 return 语句中呈现对象
您很可能试图直接渲染处于状态的itemsInCart，而不是真正将其映射到jsx 元素。附带说明一下，选择使用fetch(...).then 语法或async...await 语法。混合它们会破坏async...await 的目的。

标签： javascript reactjs

【解决方案1】：

你可以使用断点查看itemsInCart的最终值，来检查这个数组是否包含React子组件的列表。

从你的代码，我猜这个数组只包含{name and qty}的对象，不能直接渲染。

您可以尝试将这些对象解析为组件以呈现 UI。

希望对您有所帮助。

【讨论】：