如何解决React点击按钮执行多操作时的‘too many re-renders’错误

嘿，我来帮你看看这个问题！你遇到的Too many re-renders错误，根源其实在按钮的onClick事件处理写法上，咱们一步步拆解：

错误原因分析 #

你写的按钮点击事件代码：

<button onClick={() => getPerson(), setCount(count + 1)}>Click Me</button>

这里的语法存在问题：逗号运算符并没有把两个操作都包裹进点击触发的函数里。实际上，箭头函数的主体只有getPerson()，而后面的setCount(count + 1)是在组件每次渲染时直接执行的——不是点击按钮的时候！

每次调用setCount都会触发组件重渲染，重渲染时又会再次执行setCount，这样就形成了无限循环，React为了防止页面卡死，就抛出了Too many re-renders的错误提示。

你之前在useEffect里添加[]作为依赖项是正确的，它确保getPerson只在组件挂载时执行一次，和这次的无限重渲染问题无关哦。

解决方案 #

把两个操作都放进箭头函数的大括号中，确保它们只有在按钮被点击时才会执行：

<button onClick={() => {
  getPerson();
  setCount(count + 1);
}}>Click Me</button>

额外优化建议 #

因为setCount的更新依赖于之前的count状态值，建议使用函数式更新的写法，这样可以避免闭包导致的状态更新不准确问题（比如多次快速点击时可能出现的计数错误）：

<button onClick={() => {
  getPerson();
  setCount(prevCount => prevCount + 1);
}}>Click Me</button>

修改后的完整代码 #

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  const [person, setPerson] = useState([]);

  useEffect(() => {
    getPerson();
  }, []);

  const getPerson = async () => {
    const response = await fetch("https://api.randomuser.me");
    const data = await response.json();
    setPerson(data.results);
  };

  return (
    <div className="App">
      <p>You clicked {count} times</p>
      <button onClick={() => {
        getPerson();
        setCount(prevCount => prevCount + 1);
      }}>Click Me</button>
      <div>{person.map((person, index) => (
        <span key={index}>{person.name.first} </span>
      ))}</div>
    </div>
  );
}

export default App;

（另外补充了map时的key属性，这是React列表渲染的最佳实践，避免控制台警告）

内容的提问来源于stack exchange，提问作者user11196706