react报错：Too many re-renders. React limits the number of renders to prevent an infinite loop. 解决方法

在使用react框架中useState函数时，如果使用不当，就很可能出现上面的错误提示。

下面先看一下正确的用法示例：

import React, { useState } from 'react';

function CounterComponent() {
  // 使用 useState 创建 counter 状态变量
  const [counter, setCounter] = useState(0);

  return (
    <div>
      {/* 在 onClick 中传递事件处理函数 */}
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
      <h1>Count: {counter}</h1>
    </div>
  );
}

export default CounterComponent;

分析：

上面这段代码十分简单，我们在onClick中传递了一个事件处理函数，希望每次点击时，能够调用setCounter函数将counter变量的值+1.

再看一下错误代码：

 // 错误示例：直接调用函数
<button onClick={setCounter(counter + 1)}>Increment</button>

// 正确示例：传递函数引用
<button onClick={() => setCounter(counter + 1)}>Increment</button>

如果直接调用函数，就提示类似下面的错误：

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

 错误分析：

onClick={setCounter(counter + 1)}，在这种错误用法中，传递的是一个setCouter函数的执行结果，而不是函数本身。假如当前counter的值为1。上面的语句可以拆解如下：

// counter = 1;
setCounter(counter + 1); // 执行之后counter值为2，返回为void
onClick = {void}

简单来说就是，onClick={setCounter(counter + 1)}语句中，传递给onClick是setCounter函数的执行结果，我们不需要点击setCounter函数就会被执行。

对于正确语句来讲，onClick={() => setCounter(counter + 1)}，传递给onClick是一个函数，只有点击时，这个函数才会去执行。

所以正确用法相当于下面的用法：

import React, { useState } from 'react';

function CounterComponent() {
  // 使用 useState 创建 counter 状态变量
  const [counter, setCounter] = useState(0);

  // 定义事件处理函数
  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      {/* 在 onClick 中传递事件处理函数 */}
      <button onClick={incrementCounter}>Increment</button>
      <h1>Count: {counter}</h1>
    </div>
  );
}

export default CounterComponent;

错误用法中为什么会出现无限循环，即infinite loop：

那是因为在错误用法中，setCounter函数，不需要点击就会被执行，即每次渲染时就会被执行，由于执行setCounter之后，counter变量的值改变了，又会触发再次渲染，而渲染又会导致counter的值改变，这样就陷入了无限循环。。。