React项目编译正常但页面无法渲染，请求排查代码问题

核心问题点 #

• useEffect无限循环：你的useEffect未设置依赖数组，每次组件渲染都会重复执行effect，触发状态更新后再次渲染，形成无限循环，阻塞页面正常渲染。
• 请求认证头格式错误：GitHub OAuth的认证头格式应为token <令牌>，你写的"token" + token缺少空格，导致请求认证失败，user始终为null。
• Button组件属性错误：react-bootstrap的Button组件没有type="primary"属性，需改为variant="primary"；且登录按钮没有文本内容，导致按钮无法正常显示。
• 未处理user为null的情况：当loggedIn设为true但user未成功获取时，直接访问user.avatar.url会抛出空指针错误，导致组件崩溃。

修复后的代码 #

App.js #

import { Button } from "react-bootstrap";
import Card from "react-bootstrap/Card";
import CardDeck from "react-bootstrap/CardGroup";
import { useEffect, useState } from "react";
import axios from "axios";

import "./App.css";

function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const token = new URLSearchParams(window.location.search).get("access_token");
    if (token) {
      axios
        .get("http://localhost:8010/proxy/user", {
          headers: {
            Authorization: `token ${token}`,
          },
        })
        .then((res) => {
          setUser(res.data);
          setLoggedIn(true);
        })
        .catch((err) => {
          console.error("获取用户信息失败:", err);
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      setLoading(false);
    }
  }, []);

  if (loading) {
    return <div className="App text-center">加载中...</div>;
  }

  return (
    <div className="App text-center container-fluid">
      {!loggedIn ? (
        <>
          <img
            className="mb-4"
            src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
            width={150}
            alt="gitMark"
          />
          <h1 className="h3 mb-3 font-weight-normal">Sign in with GitHub</h1>
          <Button
            variant="primary"
            className="btn"
            size="lg"
            href="https://github.com/login/oauth/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=http://localhost:8080/oauth/redirect"
          >
            登录GitHub
          </Button>
        </>
      ) : (
        user ? (
          <>
            <h1> Welcome {user.name}! </h1>

            <CardDeck>
              {[...Array(3)].map((e, i) => (
                <Card key={i} style={{ maxWidth: "25%", margin: "auto" }}>
                  <Card.Img variant="top" src={user.avatar_url} />
                  <Card.Body>
                    <Card.Title>{user.name}</Card.Title>
                    <Card.Text>{user.bio || "暂无简介"}</Card.Text>
                    <Button
                      variant="primary"
                      target="_blank"
                      href={user.html_url}
                    >
                      GitHub Profile
                    </Button>
                  </Card.Body>
                </Card>
              ))}
            </CardDeck>
          </>
        ) : (
          <div>登录失败，请重试</div>
        )
      )}
    </div>
  );
}

export default App;

额外注意事项 #

1. 替换登录链接中的YOUR_CLIENT_ID为你自己的GitHub OAuth应用ID。
2. GitHub API返回的用户头像字段是avatar_url，而非avatar.url，需对应修改。
3. 给列表渲染的Card组件添加key属性，符合React列表渲染规范。
4. 添加loading状态，优化请求过程中的用户体验。

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