前端调用后端接口后页面空白，疑useEffect存在问题求助

这段useEffect代码存在语法错误和逻辑缺陷，这就是页面空白的核心原因：

1. 语法错误（最关键问题） #

你提供的代码有多处未闭合的语法结构，直接导致代码无法正常执行：

• catch块的闭合大括号缺失，代码结构完全混乱
• 自执行的async函数没有用)()完成闭合
• useEffect的回调函数也缺少收尾的闭合大括号

修正语法后的代码示例：

useEffect(() => {     
  (async () => {       
    setLoading(true)       
    try {         
      const res = await apiConnector("GET", categories.CATEGORIES_API)     
      setSubLinks(res.data.data)       
    } catch (error) {         
      console.log("Could not fetch Categories.", error)       
    }
    setLoading(false)    
  })() // 闭合自执行异步函数
}, []) // 添加依赖数组

2. 逻辑缺陷 #

• 缺少依赖数组：原代码没有给useEffect添加依赖数组[]，会导致组件每次渲染都重复触发接口请求，可能引发无限重渲染，让页面无法完成正常渲染流程。
• 若页面存在基于loading状态的条件渲染（比如loading为true时不展示内容），语法错误会导致setLoading(false)根本无法执行，loading一直处于true状态，直接造成页面空白。

为什么没看到报错？ #

大概率是你忽略了浏览器控制台的语法错误提示，这类语法错误会直接阻断组件挂载流程，导致页面无法渲染任何内容。

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