如何在for循环中使用React Hooks？解决批量添加DOM元素问题

你之前用原生DOM操作+Hook的方式不符合React的设计逻辑，还违反了Hook的调用规则，所以会报错。正确的做法是利用React的JSX列表渲染能力，直接遍历数据生成元素，不需要手动操作DOM。

修改后的代码 #

import "./App.css";
import React from "react";
import data from "./data.json";

function App() {
  return (
    <div>
      <div id="container">
        {/* 遍历data数组，生成对应数量的div */}
        {data.map((item, index) => (
          <div key={index} className="divStyle">
            {/* 可根据data中的字段渲染内容，比如{item.name}，不需要则留空 */}
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

关键说明 #

1. 避免手动DOM操作：React通过虚拟DOM管理视图，直接用appendChild会绕过React的状态管理，导致视图与状态不同步，性能也更差。
2. Hook调用规则：React要求Hook必须在组件顶层作用域调用，不能放在循环、条件判断或嵌套函数里，否则会触发报错。
3. 列表渲染的key属性：遍历生成元素时必须加唯一的key，帮助React识别元素变化。如果data里有唯一ID（比如item.id），优先用ID作为key，比index更稳定。

内容的提问来源于stack exchange，提问作者Zoltán Fodor