React项目部署GitHub Pages遇TypeError: Cannot read properties of null (reading 'useState')

API 探路者

2026-8-22

解决React项目部署GitHub Pages后空白及useState报错问题

问题原因

你碰到的TypeError: Cannot read properties of null (reading 'useState')错误，核心问题是useState Hook没有在React函数组件的顶层作用域里调用。Hook的规则明确要求：所有Hook必须在React函数组件或自定义Hook的顶层执行，不能放在组件外部、条件语句、循环或者嵌套函数里。你的代码直接把useState写在文件顶层，而非函数组件内部，本地开发环境可能因为宽松的错误检测没触发报错，但生产构建（GitHub Pages部署的是生产环境包）会严格校验，最终导致页面渲染失败。

解决方案

修复App.jsx

把所有useState调用包裹到默认导出的函数组件内部：

import { useState } from 'react'
import React from "react"

// 定义App函数组件
function App() {
  // 将所有useState移到组件顶层
  const [correctcount, setCount] = useState([false,false,false,false,false])
  const [isShown, SetShow] = useState(true)
  const [apidata, SetData] = useState([])
  const [checkanswers,SetAnswers] = useState(false);
  const[refresh,SetRefresh] =useState(false);
  const[finalscore,SetScore] =useState(0);

  // 这里添加组件的业务逻辑和JSX返回内容
  return (
    <div>
      {/* 你的组件内容 */}
    </div>
  )
}

export default App

修复Questions.jsx

同样把useState放到函数组件内部，同时确保组件正确接收props：

import React from "react";
import { useState } from 'react'

// 定义Questions函数组件，接收props参数
function Questions(props) {
  const [selected, SetSelected] = useState(5);
  const[qorder,SetOrder] = useState(props.questions);

  // 添加组件逻辑和JSX返回内容
  return (
    <div>
      {/* 你的组件内容 */}
    </div>
  )
}

export default Questions