將 props 傳遞給組件：“對象作為 React 子對象無效”

Question

我試圖簡單地傳遞單擊項目的 ID 以顯示在不同組件（“購物車”）下的另一個頁面上。 在下面的代碼底部，我有一個包含<Cart test={product.id} />的按鈕，當單擊該按鈕時，它會提取我希望在“購物車”中顯示的 ID。

但是，我收到以下錯誤消息：

對象作為 React 子級無效（發現：object 鍵為 {history, location, match, staticContext}）。 如果您打算渲染一組子項，請改用數組。

有簡單的語法錯誤嗎？

import React, { useState, useEffect, Cart } from 'react';
import './../App.css';
import * as ReactBootStrap from 'react-bootstrap';

function Item(props) {
  const [product, setProduct] = useState([]);
  const [loading, setLoading] = useState(false);
  const [quantity, setQuantity] = useState(1);
  const [cost, setCost] = useState([]);

  useEffect(async () => {
    fetchItems();
  }, []);

  const itemId = props.match.params.item;
  const fetchItems = async () => {
    const data = await fetch('https://fakestoreapi.com/products/' + itemId);
    const items = await data.json();
    setProduct(items);
    setLoading(true);
    setCost(items.price);
  };

  function priceUSD(change) {
    return change.toFixed(2);
  }

  useEffect(() => {
    const newCost = quantity * product.price;
    setCost(priceUSD(newCost));
  }, [quantity]);

  return (
    <div className="App">
      <h2>Item</h2>
      <div className="gridContainer">
        {loading ? (
          <div key={itemId} className="productStyle">
            <img src={product.image} className="productImage"></img>
            <p>{product.title}</p>
            <p>{product.description}}</p>
            <p>${priceUSD(product.price)}</p>

            <div className="quantity">
              <button
                className="btn minus-btn"
                type="button"
                onClick={quantity > 1 ? () => setQuantity(quantity - 1) : null}
              >
                -
              </button>
              <input type="text" id="quantity" value={quantity} />
              <button className="btn plus-btn" type="button" onClick={() => setQuantity(quantity + 1)}>
                +
              </button>
            </div>

            <button type="button" onClick={() => <Cart test={product.id} />}>
              Add to shopping cart ${cost}
            </button>
          </div>
        ) : (
          <ReactBootStrap.Spinner className="spinner" animation="border" />
        )}
      </div>
    </div>
  );
}

export default Item;

大車

import React, { useState, Item } from 'react';
import './../App.css';
import './Item.js';

function Cart(test) {
    return (
      <div className="App">
        <p>{test}</p>
      </div>
    );
}

export default Cart;

Answer 1

組件道具是對象。 您可以在官方文檔中閱讀更多關於它們的信息。

您可以解構Cart組件的 props：

function Cart({test}) {
    return (
      <div className="App">
        <p>{test}</p>
      </div>
    );
}

或使用props的顯式test屬性：

function Cart(props) {
    return (
      <div className="App">
        <p>{props.test}</p>
      </div>
    );
}