在App.js中使用useState报错“Cannot use useState at a top level”求助

错误原因 #

React的Hook（包括useState）有严格使用规则：必须在React函数组件内部调用，不能放在文件顶级作用域中。你之前的代码把useState写在组件外部，直接触发了这个错误。另外，Box.js里是数据数组而非React组件，不能直接作为useState的初始值传入。

修复步骤 #

1. 修正Box.js的数据导出 #

确保Box.js导出的是纯数据数组：

// src/Box.js
export const boxData = [
  { id: 1, On: true },
  { id: 2, On: false },
  { id: 3, On: true },
  { id: 4, On: false },
  { id: 5, On: true },
  { id: 6, On: false }
];

2. 修正App.js的代码 #

将useState移入React函数组件内部，同时正确导入并使用Box.js的数据：

// src/App.js
import React, { useState } from 'react';
import { boxData } from './Box';

// 定义React函数组件
function App() {
  // 在组件内部调用useState，传入正确的初始数据
  const [boxes, setBoxes] = useState(boxData);

  // 修正map的返回逻辑：用小括号让JSX自动返回，或显式写return
  const boxElements = boxes.map((box) => (
    <div className="box" key={box.id}></div>
  ));

  // 必须返回JSX结构
  return (
    <div className="app-container">
      {boxElements}
    </div>
  );
}

export default App;

关键注意点 #

• 所有Hook必须在组件内部、且组件的顶层调用（不能放在条件判断、循环或嵌套函数里）。
• 区分数据文件和组件文件：纯数据直接导出变量即可，无需写成React组件。
• 使用map生成JSX时，箭头函数用大括号包裹逻辑必须显式加return；用小括号包裹JSX可省略return。

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