ReactJs handleAddProduct 不是 onClick 的函數

Question

我正在用購物車完成一個頁面。 我有一個功能可以將產品添加到購物車中，並且可以在頁面的其他部分完美運行。 問題是在主頁上該功能告訴我：

handleAddProduct不是onClick的函數。

在這里，我留下導致問題的組件

應用程序.js

const [cartItems, setCartItems] = useState([]);

  const handleAddProduct = (product) => {
    toast('✔️ Producto añadido')
    console.log('Producto seleccionado')
    const ProductExist = cartItems.find((item) => item.id === product.id);
    if(ProductExist){
      setCartItems(
        cartItems.map((item)=>
        item.id === product.id
        ? {...ProductExist, quantity: ProductExist.quantity + 1}
        : item
        )
      );
    } else {
      setCartItems([...cartItems, {...product, quantity: 1}]);
    }
    
  };

  ...

  // Here I am passing the handleAddProduct function as a prop to the 'Inicio.jsx' component
  <Route path='/' exact element={<Inicio handleAddProduct={handleAddProduct} />}/>

Inicio.jsx

在這里，我將 handleAddProduct 函數作為道具導入到“Inicio.jsx”組件，然后將其作為道具傳遞回 Cards.jsx 組件

const Inicio = ({ handleAddProduct }) => {
  return (
    <>
      <section className="new__product__section">
        <h2 className="title__section__card">Nuevos Productos</h2>
        <Card items={CardItemsHero} handleAddProduct={handleAddProduct} />
        <div className="btn__link__container">
          <Button color="primary" variant="contained" size="large">
            <Link to={'/catalogo'}>
              Ver Catálogo
            </Link>
          </Button>
        </div>
      </section>

    ...

卡片.jsx

這是問題1

const Card = (props, { handleAddProduct }) => {
  return (
    <>
      <div className='card__section'>
        {props.items.map(item => {
          return(
            <div className="product__card" key={item.id}>
              <div className="product__tumb">
                <img src={require('../../assets/' + item.image + '.png')} alt={item.title} />
              </div>
              <div className="product__details">
                <span className="product__category">{item.type}</span>
                <h3>{item.title}</h3>
                <div className="product__bottom__details">
                  <div className="product__price">{'$ ' + item.price + '.00'}</div>
                  <div className="product__links">
                    <Link to={'/' + item.id}><InfoIcon /></Link>
                    <span onClick={()=>handleAddProduct(item)}>
                      <ShoppingCartIcon/>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </>
  )
}

澄清：頁面完美運行。 我以相同的方式將相同的功能傳遞給另一個組件中的其他組件，即使使用相同的<span>行，並且添加產品沒有任何問題。 我認為在 Card.jsx 中導入道具時出現錯誤，但我想不出它可能是什么，因為如果我只是放置{props, handleAddProducts}頁面將停止工作

這是回購： https ://github.com/LuksFay/Fabianesi-page

Answer 1

問題出在Card組件上。 React 組件只接收一個參數，即props對象。 在代碼中， Card組件試圖從未定義的參數中解構handleAddProduct 。

const Card = (props, {handleAddProduct}) => {

從第一個參數props對象中handleAddProduct 。

例子：

const Card = ({ handleAddProduct, items }) => { // <-- destructure all from props
  return (
    <>
      <div className="card__section">
        {items.map((item) => {
          return (
            <div className="product__card" key={item.id}>
              <div className="product__tumb">
                <img
                  src={require("../../assets/" + item.image + ".png")}
                  alt={item.title}
                />
              </div>
              <div className="product__details">
                <span className="product__category">{item.type}</span>
                <h3>{item.title}</h3>
                <div className="product__bottom__details">
                  <div className="product__price">
                    {"$ " + item.price + ".00"}
                  </div>
                  <div className="product__links">
                    <Link to={"/" + item.id}>
                      <InfoIcon />
                    </Link>
                    <span
                      onClick={() => {
                        handleAddProduct(item);
                      }}
                    >
                      <ShoppingCartIcon />
                    </span>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

Answer 2

您的 Card.jsx 文件道具聲明似乎不正確。 像下面這樣改變。

const Card = (props) => {

  const { handleAddProduct } =  props

  return (
    <>
       [...your code]
    </>
  )
}

只捕獲道具並像這樣在下一行聲明函數。 您不能將 props 和 props 中的另一個值一起捕獲。 您還可以聲明另一個類似的道具項目

const { handleAddProduct, items } =  props

您可以在 Card.jsx 中的 jsx 上直接使用狀態 [items] 和函數 [handleAddProduct]

Answer 3

只需更新此 Card.jsx 文件：現在工作

你只需要一個概念： props 或 {items,handleAddProduct}

const Card = (props) => {
  return (
    <>
      <div className="card__section">
        {props.items.map((item) => {
          return (
            <div className="product__card" key={item.id}>
              <div className="product__tumb">
                <img
                  src={require('../../assets/' + item.image + '.png')}
                  alt={item.title}
                />
              </div>
              <div className="product__details">
                <span className="product__category">{item.type}</span>
                <h3>{item.title}</h3>
                <div className="product__bottom__details">
                  <div className="product__price">
                    {'$ ' + item.price + '.00'}
                  </div>
                  <div className="product__links">
                    <Link to={'/' + item.id}>
                      <InfoIcon />
                    </Link>
                    <span
                      onClick={() => {
                        props.handleAddProduct(item);
                      }}
                    >
                      <ShoppingCartIcon />
                    </span>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};