javascript - 我不知道为什么我会得到这个，如果它是根据 React 手册的话

Question

我告诉他我正在从组件传输一个事件 child ( ItemCount) 到父组件 Parent ItemDetail 的 onADD 事件，仅当将项目传递给它时才会起作用，并且当它传递时，状态变为 true。

child 有一个名为“添加到购物车”的事件，该事件会触发该事件并传递产品计数器。

它运行完美，但它向我发出了以下警告。

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;

Answer 1

<br/><h2>{avisarStock}</h2>

在这里，您尝试渲染一个组件，但实际上avisarStock是一个设置状态并打开警报的函数。尝试渲染这个函数是没有意义的。

看来您打算渲染 stock不是avisarStock 。这将在 <h2> 中显示您的库存状态。 :

<br/><h2>{stock}</h2>