时间戳

首页 > 解决方案 > 如何将参数传递给 useSate 的 setState 函数？

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

问题描述

我在学习反应时遇到了这个codePen 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.

标签： javascriptreactjs

解决方案

因为这里：

<button onClick={handleClick(1)}>

您是handleClick立即调用，而不是在单击按钮时调用，因此在每次渲染时都会调用该函数。然后这会触发重新渲染，你会得到你的“无限”循环。

尝试使用一个匿名函数来调用你的handleClick：

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

或者

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

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

值得一提的是，您之前的行 ( )在单击按钮时<button onClick={handleClick}>调用该函数，但将事件对象作为第一个参数传递。handleClick

推荐阅读