如何将参数传递给useSate的setState函数？

Question

我遇到了此代码笔 https://codepen.io/enmanuelduran/pen/LgMomz在学习时会做出反应。我尝试进行一些更改，最终出现“太多的重新渲染”错误。

代替

const handleClick = () => setCount(count + 1);

我试图将参数传递给handleClick函数

const handleClick = (x) => setCount(x + count + 1);

在返回声明中，我进行了更改

<button onClick={handleClick}>

我添加了

<button onClick={handleClick(1)}>

当我运行它时，我得到

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Answer 1

因为在这里：

<button onClick={handleClick(1)}>

您要立即调用handleClick，而不是单击按钮时，因此在每个渲染器上都会调用该函数。然后触发重新渲染，您将获得“无限”循环。

---

尝试使用匿名函数，该函数依次调用您的handleClick：

<button onClick={() => handleClick(1)}>

或

<button onClick={e => handleClick(1)}>

例如，如果您需要利用事件对象。

---

对于它的价值，单击按钮时，您先前的行（<button onClick={handleClick}>）调用handleClick函数，但将事件对象作为第一个参数传递。

Answer 2

<button onClick={handleClick}>

此代码意味着onClick引用了handleChange方法

同时

<button onClick={handleClick(1)}>

表示将onClick设置为返回值handleClick

---

为纠正错误，将onClick的值设置为function，就像这样

<button onClick={() => handleClick(1)}>

Answer 3

在编写handleClick(1)时，您实际上是在此时调用该函数，这导致该函数重新调用render函数，并且无论如何都调用同一函数，因此您进入了一个无限循环。要将引用发送给函数（即指针），您必须像这样编写它：

<button onClick={() => handleClick(1)}>

Answer 4

除所有其他答案外，请注意，当您的状态取决于先前的状态值时，大多数情况下，在计数器需要根据旧值进行一些计算（例如递增）的情况下，建议使用回调在useState返回的setFuntion中，所以在您的情况下

下面的代码有时可能会产生不正确的结果，因为您是直接从状态中获取旧值来设置该值，而该值有时可能是渲染之间的未更新值，

const handleClick = () => setCount(count + 1);

因此，要确保一切正常，请使用以下回调方法，

const handleClick = () => setCount( prevCount => prevCount + 1);

其中上述回调函数接收带有previos状态值的参数。