如果我们尝试更改 On Click 函数本身的状态，为什么反应会抛出 "Too many re-renders."

Question

最近几天我正在学习 React Hooks，但我不明白为什么会出现此错误。

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

使用状态变量

 const [count, setSamplePageData] = useState(0);

在 onclick 中更改状态

<button className="btn-primary" onClick={setSamplePageData(1)}>

Answer 1

您正在调用 setSamplePageData 并在渲染步骤中将参数 1 传递给它。（这会触发一个新的渲染，它会再次调用该函数，无限次）。

然后您将 return 的值（即 IIRC，undefined）传递给 onClick。

您需要将函数传递给 onClick。

 const [count, setSamplePageData] = useState(0);
 const clickHandler = () => setSamplePageData(1);
 // ...
 <button className="btn-primary" onClick={clickHandler}>

Answer 2

这是因为渲染时会立即调用 setSamplePageData，当您设置状态时会触发渲染事件，从而产生无限循环。

改为在 onClick 事件中定义内联函数

<button className="btn-primary" onClick={() => setSamplePageData(1)}>

Answer 3

因为如果你不在每个渲染器上使用括号反应调用函数，它会导致这么多 re-renders 你应该将你的 onClick 事件处理程序更改为此

onClick={() => setSamplePageData(params)}

onClick 中的这些括号可防止在每次渲染时调用该函数。

如果我们尝试更改 On Click 函数本身的状态，为什么反应会抛出 "Too many re-renders."

Why react throws "Too many re-renders.", if we try to change state on a On Click function itself

javascript

reactjs

react-hooks