如何修复React中‘Too many re-renders’错误并实现数据自动渲染？

问题原因 #

你代码里直接在组件函数体内调用setKeysState，会触发无限重渲染循环：

1. 组件首次渲染时执行setKeysState，修改state导致组件重新渲染
2. 组件重新渲染时又会再次执行setKeysState，再次触发渲染
3. 这个循环不断重复，直到React触发"Too many re-renders"的保护机制

解决方案 #

1. 初始化State时直接传入初始值 #

如果只需要在组件首次渲染时加载keys的值，直接把keys作为useState的初始参数即可：

let [keysState, setKeysState] = useState(keys);

2. 监听外部keys的变化实现自动更新 #

如果需要在keys外部变更时自动同步到state，使用useEffect监听keys的变化：

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

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

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

  useEffect(() => {
    // 复制数组确保引用变化，触发state更新
    setKeysState([...keys]);
  }, [keys]); // 仅当keys引用变化时执行回调

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

const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(<App />);

注意事项 #

• 引用类型的依赖检测：keys是数组（引用类型），React通过引用对比检测变化。如果直接修改原数组（比如keys.push("c")），引用不会改变，useEffect不会触发。必须创建新数组（比如keys = [...keys, "c"]）才能触发更新。
• 列表渲染的key属性：给每个<li>添加唯一key，这是React列表渲染的强制要求，避免性能警告和渲染异常。
• HTML语义规范：将<li>包裹在<ul>标签内，符合HTML结构要求。

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