错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。 - 反应 JS

Question

So my application was working fine until I tried to add "add to cart" functionality. I am trying to fetch products from backend API and display it into my app (which worked fine previously) and add to cart functionality where users can click add to cart and it adds the specific product into their localstorage but I get Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. error when I simply load up the page. Here is my code:

import React, {useState, useEffect} from 'react'
import { Card, Button } from 'react-bootstrap'
import axios from 'axios'


function HomeScreen() {
    const [products, setProducts] = useState([])
    const [cart, setCart] = useState([])
    function handleClick(product) {
        setCart(cart + product)
        localStorage.setItem("cartItems", cart)
    }
    useEffect(() => {
        async function getProducts() {
            try {
              const response = await axios.get('http://localhost:8000/api/products/');
              setProducts(response.data);
            } catch (error) {
              console.error(error);
            }
          }
       getProducts()
    },[])
    return (
        <div>
            {products.map(product => (
                <Card className="my-3 p-3 rounded" key={product.id}>
            <Card.Img src={'http://localhost:8000' + product.image} />
            <Card.Body>
            <Card.Title as="div">
                <strong>{product.name}</strong>
            </Card.Title>
            <Card.Text as="div">
            
            </Card.Text>
            <Card.Text as="h3">
            ${product.price}
            </Card.Text>
            <Card.Link>
                <Button onClick={handleClick(product)} className="btn-primary">Add to cart</Button>
            </Card.Link>
            </Card.Body>
        </Card>
            ))}
        </div>
    )
}

export default HomeScreen

Answer 1

onClick={()=>handleClick(product)}  

Passing the handleClick function to onClick actually runs it causing a re-render everytime the Button is rendered.

Passing it as a arrow function, passes the function object without executing it, until the onClick method is called.