如何修复 React 中的以下“重新渲染错误太多”？答案

【问题标题】：How to fix the following "Too many re-renders error" in React?如何修复 React 中的以下“重新渲染错误太多”？
【发布时间】：2022-11-27 19:53:56
【问题描述】：

我正在尝试将字符串数组 keys 渲染到 React 组件中。 keys 是用户按下的键（但为了这个例子，我只是对它们进行了硬编码）。

import { useState } from "react";
import * as ReactDOM from "react-dom";

let keys = ["a", "b"];

function App() {
  let [keysState, setKeysState] = useState([]);

  setKeysState((keysState = keys));

  return (
    <div>
      {keysState.map((key) => (
        <li>{key}</li>
      ))}{" "}
    </div>
  );
}

const rootElement = document.getElementById("root");

ReactDOM.createRoot(rootElement).render(<App />);

但我收到此错误：

太多的重新渲染。 React 限制渲染次数以防止无限循环。

我知道我可以通过创建和 onClick 处理程序来避免此错误...但我不想在单击时显示 keysState。我希望它在 keys 更改时立即显示并重新呈现。

直播码：https://codesandbox.io/s/react-18-with-createroot-forked-vgkeiu?file=/src/index.js:0-504

【问题讨论】：

我认为您缺少有关 useState 的信息。您不需要编写此 setKeyState 函数。它已经由useState返回，基于提供的初始值的类型。
请再次阅读文档：reactjs.org/docs/hooks-state.html

标签： javascript reactjs

【解决方案1】：

您可以将 setKeys 放在 useEffect 钩子中

      useEffect(()=>{        
        setKeys((keysState = keys));
      }, [keys])

它只会在键值更改时重新呈现

【讨论】：