错误(“太多的重新呈现。React限制呈现的次数，以防止无限循环”)。功能组件而不呈现

Question

这是我的组成部分：

import React, { useState } from "react";

const Product = () => {
    const [count, setCount] = useState(0);
    return ( 
        <>
        <span className="m-2 text-info">Laptop</span>
        <span className="m-2 badge bg-primary">{format()}</span>
        <button onClick={increase()} className="m-2 btn-sm btn-success">+</button>
        <button onClick={decrease()} className="m-2 btn-sm btn-warning">-</button>
        <button onClick={delet()} className="m-2 btn-sm btn-danger">Delete</button>
        </> 
     );

     function increase(){
          setCount(count + 1);
      }
      
     function decrease(){
          setCount(count - 1);
      }
     function delet(){
          setCount(count - count);
      }
      
     function format(){
          if (count === 0){
              return "Zero";
          }else{
              return count;
          }
      }
}
 
export default Product;

Answer 1

您正在调用这些函数，而不是传递它们。

改变这个

<button onClick={increase()} className="m-2 btn-sm btn-success">+</button>
<button onClick={decrease()} className="m-2 btn-sm btn-warning">-</button>
<button onClick={delet()} className="m-2 btn-sm btn-danger">Delete</button>

投入到这个

 <button onClick={() => increase()} className="m-2 btn-sm btn-success">+</button>
 <button onClick={() => decrease()} className="m-2 btn-sm btn-warning">-</button>
 <button onClick={() => delet()} className="m-2 btn-sm btn-danger">Delete</button>

或者这个

 <button onClick={increase} className="m-2 btn-sm btn-success">+</button>
 <button onClick={decrease} className="m-2 btn-sm btn-warning">-</button>
 <button onClick={delet} className="m-2 btn-sm btn-danger">Delete</button>

另外，我会将函数声明移到最上面，并将部分放在底部。

import React, { useState } from "react";

const Product = () => {
    const [count, setCount] = useState(0);
     function increase(){
          setCount(count + 1);
      }
      
     function decrease(){
          setCount(count - 1);
      }
     function delet(){
          setCount(count - count);
      }
      
     function format(){
          if (count === 0){
              return "Zero";
          }else{
              return count;
          }
      }
    return ( 
        <>
        <span className="m-2 text-info">Laptop</span>
        <span className="m-2 badge bg-primary">{format()}</span>
        <button onClick={increase} className="m-2 btn-sm btn-success">+</button>
        <button onClick={decrease} className="m-2 btn-sm btn-warning">-</button>
        <button onClick={delet} className="m-2 btn-sm btn-danger">Delete</button>
        </> 
     );
}

Answer 2

您应该将onClick函数更改为箭头函数：

<button onClick={() => increase()} 

Answer 3

您必须更新您的onClick触发器，还必须重新格式化您的函数，正如我所看到的，您在return()之后使用了函数。

所以正确的代码是：

const Product = () => {
    const [count, setCount] = useState(0);


     function increase(){
          setCount(count + 1);
      }
      
     function decrease(){
          setCount(count - 1);
      }
     function delete(){
          setCount(count - count);
      }
      
     function format(){
          if (count === 0){
              return "Zero";
          }else{
              return count;
          }
      }

    return ( 
        <>
        <span className="m-2 text-info">Laptop</span>
        <span className="m-2 badge bg-primary">{format()}</span>
        <button onClick={() => {increase()}} className="m-2 btn-sm btn-success">+</button>
        <button onClick={() => {decrease()}} className="m-2 btn-sm btn-warning">-</button>
        <button onClick={() => {delete()}} className="m-2 btn-sm btn-danger">Delete</button>
        </> 
     );
}
 
export default Product