Javascript 什么'；这两个箭头函数的区别是什么？

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

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

vs

const handlePurchase=prod=>（）=>{
设置所选产品（产品）
history.push（`/product/？name=${prod.name}&id=${prod.id}`）
}
返回(
保持真实，保持真实
{productsdb.map（prod=>(
{prod.name}
{'$'+prod.price}
))}
)
}

第一个函数是返回另一个函数的函数，该函数不会立即执行

第二个是一个常规函数，它在被调用时发生

把它改成

const handlePurchase = prod => {...}

---

您能提供您得到的任何错误吗？第一个是返回箭头函数的箭头函数。第二个可能也是，我们不知道。但是如果两者的主体

{…}

是相同的，那么要从一个主体切换到另一个主体，您还需要更改它的使用位置（这可能是意料之中的），这里是

onClick{（）=>handlePurchase（prod）}

。我没有收到任何错误。有了功能1，程序运行得非常完美。我只是想了解这两个函数之间的区别，“崩溃”如果不是错误，意味着什么？另外，如果第一个可以工作，为什么要使用第二个，特别是如果它不工作的话？这是因为如果函数不返回函数，内部代码将立即执行，而不是延迟执行，直到单击按钮，返回值作为单击处理程序传递。也许继续用第一个？

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>
        </>
    )
}

const handlePurchase = prod => {...}