錯誤函數作為 React 子級無效。 如果您返回 Component 而不是<Component />從渲染

Question

我告訴你我正在制作一個購物車，我收到以下警告“函數作為 React 子級無效。如果您返回一個組件而不是從渲染中返回，則可能會發生這種情況。或者您可能打算調用此函數而不是返回它。”，我正在做的是將事件信息從兒子傳遞給父親，以便稍后在購物車中使用。

這些代碼是：

ItemDetial（客戶選擇的產品的詳細信息）：

import React, { useState } from "react";
import '../App.css';
import 'materialize-css/dist/css/materialize.css';
import Count from './ItemCount';
import { Link } from "react-router-dom";


export const ItemDetail = (({item}) => {  

  const [itemSell, setItemSell] = useState(false);

  const onAdd = (count) => {
    setItemSell(true);
  }
 
  return (
    <>
      {
        <main className="row soloProduct" id= {item.id}>
            <aside>
              <img src={item.image} alt="item" className="itemImg responsive-img"/>
            </aside>
            <article>
              <div className=" col s12 m8">
                <h5 className="itemName">{item.title}</h5>
              </div>
              <div className="col s12 m4">
                <p className="itemPrice"> {item.price}</p>
              </div>
              <div className="col s12 m12">
                <p className="itemDescription">{item.description}</p>
              </div>
              <div className="col s12">
               {
                  itemSell ? <Link to="/cart"><button className="waves-effect waves-light btn-large">Finalizar Compra</button></Link> : <Count stockInitial={5} onAdd= { onAdd } />
                }
                
              </div>
            </article>
        </main>
      }
    </>
  )

});

export default ItemDetail;

ItemCount（它是一個計數器，因此客戶有可能購買多個產品）：

import React, { useState} from 'react';
import 'materialize-css/dist/css/materialize.css';
import '../App.css';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPlus, faMinus, faPowerOff} from '@fortawesome/free-solid-svg-icons';

const ItemCount = ({stockInitial, initial = 0, onAdd}) => {
  const [contador, setContador] = useState(initial)
  const [stock, setStock] = useState(stockInitial)

  
  const sumar = () => {  
    setContador(contador + 1)
    setStock(stock - 1);
    avisarStock();
  }

  const restar= () => {
    if(contador > 0){
      setContador(contador - 1);
      setStock(stock + 1);      
    }
    else
    {
      setContador(0);
    }
  }

  const reset = () =>{
    setContador(0);
    setStock(stockInitial);
  }

  const avisarStock = () => {
    if(stock > 0 ){
      
    } 
    else{
      alert('No podemos enviar su envio no hay stock');
      setStock(0);
      setContador(contador)     
    }

  }

  const agregarAlCarrito = () => {
    onAdd(contador);
  }

  return(
    <>
      <div className=" row left text">Stock: {stock}</div>

      <article>{contador}</article>
      <div className="buttonCount">
        <button onClick={sumar}>
          <FontAwesomeIcon icon ={faPlus}/>
        </button>
        <button onClick={restar}>
          <FontAwesomeIcon icon={faMinus}/>
        </button>
        <button onClick={reset}>
          <FontAwesomeIcon icon={faPowerOff}/>
        </button>
        <br/><h2>{avisarStock}</h2>
        <button onClick={agregarAlCarrito}> Agregar al carrito </button>
      </div>
    </>
  )
}

export default ItemCount;

如果你能幫幫我謝謝

Answer 1

嘿胡安希望你一切都好..

我剛剛發現了一個錯誤，那就是您的 ( itemdetails 組件中的括號。請檢查下面給出的相同代碼-

import React, { useState } from "react";
import '../App.css';
import 'materialize-css/dist/css/materialize.css';
import Count from './ItemCount';
import { Link } from "react-router-dom";


const ItemDetail = ({item}) => {  

  const [itemSell, setItemSell] = useState(false);

  const onAdd = (count) => {
    setItemSell(true);
  }
 
  return (
    <>
      {
        <main className="row soloProduct" id= {item.id}>
            <aside>
              <img src={item.image} alt="item" className="itemImg responsive-img"/>
            </aside>
            <article>
              <div className=" col s12 m8">
                <h5 className="itemName">{item.title}</h5>
              </div>
              <div className="col s12 m4">
                <p className="itemPrice"> {item.price}</p>
              </div>
              <div className="col s12 m12">
                <p className="itemDescription">{item.description}</p>
              </div>
              <div className="col s12">
               {
                  itemSell ? <Link to="/cart"><button className="waves-effect waves-light btn-large">Finalizar Compra</button></Link> : <Count stockInitial={5} onAdd= { onAdd } />
                }
                
              </div>
            </article>
        </main>
      }
    </>
  )

};

export default ItemDetail;

如果這行得通，請讓我知道。 謝謝