如何修復錯誤：對象作為 React 子對象無效。 如果您打算渲染一組孩子，請改用數組

Question

我正在嘗試使用一組對象設置 a 狀態，但出現上述錯誤，我不知道如何解決它。

我的代碼：

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。 那么為什么說使用數組呢？ 謝謝

Answer 1

您可以使用斷點查看itemsInCart的最終值，以檢查此數組是否包含 React 子組件的列表。

從您的代碼中，我猜該數組僅包含 {name and qty} 的對象，無法直接呈現。

您可以嘗試將這些對象解析為組件以呈現 UI。

希望這有幫助。