React项目初始化Parse Server遇空白页及Super expression错误求助

一、解决"Super expression must either be null or a function"报错 #

这个错误大概率是styled组件定义错误或模块导入/导出异常导致，按以下步骤排查：

1. 检查styled.js文件的组件定义 #

确保导出的Card、LoginForm、LoginStyle、Navbar都是用styled-components正确创建的React组件，示例正确写法：

import styled from 'styled-components';

export const Navbar = styled.nav`
  // 样式代码
`;

export const LoginStyle = styled.div`
  // 样式代码
`;

export const Card = styled.div`
  // 样式代码
`;

export const LoginForm = styled.form`
  // 样式代码
`;

若某个组件被错误赋值为非函数/非组件类型（比如直接赋值对象、字符串），就会触发该报错。

2. 验证Parse依赖及导入 #

• 确保已正确安装Parse：执行npm install parse或yarn add parse
• 在LoginScreen开头添加console.log(Parse)，确认导入的Parse为有效对象，若输出异常，重新安装Parse并核对导入路径。

3. 检查组件导出/导入 #

确认LoginScreen是默认导出，且在路由配置中正确导入该组件，避免误用非组件值。

二、修复登录逻辑漏洞 #

当前登录代码存在逻辑问题，修正后的完整代码：

const handleSubmit = async (e) => {
  e.preventDefault();
  setLoading(true);

  try {
    const user = await Parse.User.logIn(username, password);
    const isAdmin = user.get("adminStatus") === "super";

    console.log(user);
    // 仅登录成功时显示成功提示
    toast.success("Successfully Logged in");
    // 存储实际的管理员状态（布尔值转字符串）
    localStorage.setItem("isAdmin", JSON.stringify(isAdmin));
    
    if (isAdmin) {
      console.log("User is an admin");
      navigate("/");
    } else {
      console.log("You do not have admin privileges");
      toast.warning("无管理员权限");
      // 可选：跳转至普通用户页面
      // navigate("/user-dashboard");
    }
  } catch (error) {
    // 显示错误提示
    toast.error("Invalid username or password");
    console.error("登录失败:", error);
  } finally {
    // 无论成功失败都重置加载状态
    setLoading(false);
  }
};

关键修正点 #

• 将成功提示移至try块内，避免登录失败也显示成功信息
• 用JSON.stringify存储布尔类型的管理员状态，避免读取时类型异常
• 在finally块中重置loading状态，防止按钮一直处于加载状态
• 为非管理员用户增加权限提示，避免错误跳转

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