Javascript 我不知道为什么我得到这个，如果它是根据 React 手册

我告诉他我正在从组件传输事件

该子级有一个名为"添加到购物车"的事件，该事件会触发该事件并传递产品计数器.

它运行得很好，但它给了我以下警告.

react-dom.development.js:86警告:函数作为React子函数无效.如果返回组件而不是从渲染返回组件，则可能会发生这种情况.或者你是想调用这个函数而不是返回它.

你能告诉我这个错误和我做错了什么吗？从现在开始非常感激

我分享代码谢谢

ItemCount(组件子级)

import React, { useState, useContext} 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';
import {contextoProducto} from './ProductContext';
import swal from 'sweetalert';


const ItemCount = ({item, stockInitial, initial = 0, onAdd}) => {

  const [contador, setContador] = useState(initial)
  const [stock, setStock] = useState(stockInitial)

  const { addProduct } = useContext(contextoProducto);

  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{
      swal('No podemos enviar su envio no hay stock', "Gracias", "error");
      setStock(0);
      setContador(contador)     
    }

  }

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

  return(
    <div>
      <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={() => addProduct({...item, quantity: contador}) ||  agregarAlCarrito()} > Agregar al carrito </button>
      </div>
    </div>
  )
}

export default ItemCount;

ItemDetail(组件父项)

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="itemsdetails">
      <div className="row" id= {item.id}>
        <div className="col s12 m6">
          <img src={item.image} alt="item" className="itemImg responsive-img"/>
        </div>
        <div className="col s12 m6">
          <div className="col s12">
            <h5 className="itemName">{item.title}</h5>
          </div>
          <div className="col s12">
          <p className="itemDescription">{item.description}</p>
          </div>
          <div className="col s12">
            <p className="itemPrice"> {item.price}</p>
          </div>
          <div className="col s12">
            {
              itemSell ? <Link to="/cart"><button className="waves-effect waves-light btn-large">Finalizar Compra</button></Link> : <Count item= {item} stockInitial={item.stock} onAdd= { onAdd } />
            }
          </div>
        </div>
      </div>
    </main> 
  )
};

export default ItemDetail;