React组件传值出现‘函数作为React子元素’警告问题排查

我实现了子组件ItemCount向父组件ItemDetail传递onAdd事件的功能：当用户点击“加入购物车”时，子组件传递商品计数，父组件状态变为true。功能运行正常，但控制台抛出警告：

react-dom.development.js:86 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of

return (<Component />)

from render. Or maybe you meant to call this function rather than return it.

原错误代码 #

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 ){
      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;

错误原因 #

在ItemCount组件的JSX返回值中，<h2>{avisarStock}</h2>直接将函数对象作为React子元素渲染。React无法渲染函数类型的节点，因此抛出警告。avisarStock是用于触发库存不足弹窗的逻辑函数，无需在JSX中渲染，它已经在sumar函数中被正确调用。

修复方案 #

删除<br/><h2>{avisarStock}</h2>这一行即可消除警告。

修改后的ItemCount核心返回部分 #

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>
      {/* 已删除错误的函数渲染行 */}
      <button onClick={() => addProduct({...item, quantity: contador}) || agregarAlCarrito()} > Agregar al carrito </button>
    </div>
  </div>
)

内容的提问来源于stack exchange，提问作者Juan Pablo Grover Pinto