React本地(LocalHost)项目页面空白问题求助

已执行操作 #

• 通过 npx create-react-app my-app 搭建本地React项目
• 在 manifest.json 中添加以下配置尝试解决CORS错误：

"permissions": [
  "identity",
  "YourPage.com"
],

项目结构与代码 #

Accordion组件（src/components/index.jsx） #

export default function Accordion() {
    const [selected, setSelected] = useState(null);

    return (
    <div className="wrapper">
        <div className="accordion">
            {data && data.length > 0 ? (
                data.map((dataItem) => (
                <div className="item">
                    <div className="title">
                        <h3>{dataItem.question}</h3>
                        <span>+</span>
                    </div>
                </div>))
               ) : (<div>No data found !</div>
            )}
        </div>
    </div>
)}

App.js（src/App.js） #

import './App.css';
import Accordion from './components/accordion';

function App() {
  return (
    <div className="App">
      {/* Accordion Component */}
      <Accordion />
    </div>
  );
}

export default App;

排查与修复步骤 #

1. 补全React Hooks导入
   组件中使用了useState但未从React导入，这会直接导致报错。在Accordion组件顶部添加：

   import { useState } from 'react';
   

2. 导入模拟数据文件
   组件中使用的data变量未导入，需在Accordion组件顶部添加对应导入（假设data.js与组件同目录）：

   import data from './data';
   

3. 删除无效的manifest配置
   create-react-app生成的项目不需要在manifest.json中添加permissions字段——该配置属于Chrome扩展权限，和普通React项目无关，直接删除这段代码即可。本地开发的CORS问题若涉及接口请求，可通过package.json添加"proxy"字段解决，模拟数据不存在CORS问题。

4. 修正组件导入路径
   组件文件名为index.jsx，但App.js中导入路径是./components/accordion，需调整为：

   import Accordion from './components'; // index.jsx是文件夹默认入口
   // 或把组件文件改名为accordion.jsx，保持导入路径与文件名一致
   

5. 查看控制台具体报错
   打开浏览器开发者工具（F12）的Console标签，报错信息会直接指向问题根源（比如“xxx is not defined”），这是新手排查问题的核心手段。

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