React.useEffect()组件挂载后未执行问题求助

1. 组件渲染崩溃中断钩子执行 #

你的MainPage组件初始时timetables是空数组，直接传递timetables[0]给Timetable组件，但该组件的props要求timetable是ITimetable类型（不可选）。这会触发运行时错误，导致MainPage渲染失败，useTimetables里的useEffect自然无法执行。

修复方式：

• 方法一：给Timetable的props添加可选性，内部做空值判断：

// 修改Timetable组件的props定义
interface TimetableProps {
    timetable?: ITimetable
}

export function Timetable({ timetable }: TimetableProps) {
    if (!timetable) return <div>加载中...</div>;
    
    const { activities, loading, error } = useActivities(timetable.id)
    // 剩余渲染逻辑
}

• 方法二：在MainPage中判断数组非空后再渲染组件：

<div className="timetables-view">
    {timetables.length > 0 && <Timetable timetable={timetables[0]} />}
</div>

2. 钩子内缺少依赖导入导致报错 #

useTimetables里的fetchTimetables函数使用了axios和AxiosError，但代码顶部未导入这两个模块，会触发ReferenceError。虽然同步的console.log理论上会执行，但如果组件因其他错误崩溃，这个日志也不会出现。

修复方式：
补充缺失的导入语句：

import axios, { AxiosError } from "axios";

3. 网络请求地址格式错误（次要问题） #

请求地址"localhost:8080/api/v1/timetable/all"缺少协议头（http://或https://），会被当作当前页面域名的相对路径处理，导致请求失败。虽然这不会直接导致useEffect不执行，但需要修正：

const response = await axios.get<ITimetable[]>("http://localhost:8080/api/v1/timetable/all")

4. 组件未被挂载 #

如果MainPage组件根本没被渲染到DOM中（比如路由配置错误、父组件条件渲染未满足），useTimetables钩子不会被调用，useEffect自然不会执行。

验证方式：
在MainPage顶部添加日志，确认组件是否挂载：

export function MainPage() {
    console.log("MainPage已挂载");
    const { timetables } = useTimetables();
    // 剩余代码
}

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