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

Question

过去几天我一直在学习react hook，但我不明白为什么会出现这个错误。

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。(这会触发一个新的渲染，它会无限次地再次调用该函数(。

然后将其返回值(即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

因为如果你不在每次渲染中使用括号react调用函数，它会导致多次重新渲染，你应该将onClick事件处理程序更改为这个

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

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