这两个箭头函数有什么区别？

Question

我正在建立一个网站。 每次单击“产品”时，我都希望将其保存在反应挂钩中。 为什么我使用function2时我的程序崩溃了？

const function1 = prod => () => {...} 

对比

const function2 = (prod) => {...}

const handlePurchase = prod => () => {
        setSelectedProduct(prod)
        history.push(`/product/?name=${prod.name}&id=${prod.id}`)
    }


    return (
        <>
            <h2 className="text-Header 1">Keep it Real Keep it Loco</h2>

            <ProductsContainer>
                {productsdb.map(prod => (
                    <div className="product" key={prod.id} onClick={handlePurchase(prod)}>
                        <img className="product-image" src={prod.img} alt={prod.name} />
                        <h2 className="product-name">{prod.name}</h2>
                        <h3 className="product-price">{'$' + prod.price}</h3>
                    </div>

                ))}
            </ProductsContainer>
        </>
    )
}

Answer 1

第一个是 function，它返回另一个 function，它不会立即执行

第二个是常规的 function ，它在被调用时发生

只需将其更改为

const handlePurchase = prod => {...}