React项目报Cannot access 'Object' before initialisation错误求助

错误原因 #

• 核心问题是自定义组件命名与JavaScript全局内置对象重名：Object是JS原生顶层全局构造函数，所有JS对象都继承自该对象，你将自定义组件命名为Object会直接和全局对象产生命名冲突，导致变量初始化逻辑混乱，触发访问前初始化报错。
• 次要触发因素：你使用let声明箭头函数组件，let声明的变量存在暂时性死区，在变量赋值完成前访问就会抛出同类错误，命名冲突叠加该特性进一步加剧了问题。
• 额外小问题：原有代码的判断条件里的字符串末尾多了空格、JSX节点间多了冗余分号，会导致点击切换逻辑不生效。

解决方法 #

1. 修改自定义组件的命名，遵循React大驼峰命名规范，且不要和JS内置对象/关键字重名，例如修改为语义化名称TitleToggle。
2. 同步修改所有引入、使用该组件的对应名称，也可以将组件改为function声明写法，规避let暂时性死区问题。

修改后代码示例 #

自定义组件代码（可将文件名同步改为TitleToggle.js保持统一）

import React, { useState } from "react";

function TitleToggle() {
  const [text, setText] = useState("Random title");
  const handler = () => {
    if (text === "Random title") {
      setText("Hello arif");
    } else {
      setText("Random title");
    }
  };
  return (
    <>
      <h1>{text}</h1>
      <button onClick={handler}>Click me</button>
    </>
  );
};
export default TitleToggle;

App组件代码

import React from "react";
import "./styles.css";
import TitleToggle from "./TitleToggle";

function App() {
  return (
    <>
      <TitleToggle />
    </>
  );
}
export default App;

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