React页面空白但控制台有数据无报错问题求助

问题描述 #

开发网站排行榜功能，通过Spring Boot API获取数据传递到React前端。执行npm start后页面显示空白，开发者工具无报错，控制台能看到数据，页面出现滚动条，推测数据已传递但未渲染，后端运行正常，问题出在前端。

相关代码 #

Board.js #

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Profiles from './profiles';

export default function Board() {
  
  const [Leaderboard, setLeaderboard] = useState([]);

useEffect(() => {
  loadLeaderboard();
}, []);

const loadLeaderboard = async () => {
  const result = await axios.get("http://localhost:8080/Leaderboard");
  setLeaderboard(result.data);
};


  console.log(Leaderboard);


  const sortedLeaderboard = Leaderboard.sort((a, b) => b.score - a.score);
  
  return (
    <div className="board">
        <h1 className='leaderboard'>Leaderboard</h1>
        <Profiles   Leaderboard={sortedLeaderboard}></Profiles>
    </div>
  )
}

Profiles.js #

import React from "react";
export default function Profiles({ Leaderboard }) {
  return (
    <div id="profile">
      {item(Leaderboard)}
    </div>
  );
}
function item(Leaderboard) {
  return (
    <>
      {Leaderboard.map((value, index) => (
        <div className="flex" key={index}>
          <div className="item">
            <img src={value.Image} alt="" />

            <div className="info">
              <h3 className="name text-dark">{value.Name}</h3>
              <span>{value.location}</span>
            </div>
          </div>
          <div className="item">
            <span>{value.Score}</span>
          </div>
        </div>
      ))}
    </>
  );
}

Index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.

Package.json #

{
  "name": "leaderboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.4",
    "browserify": "^17.0.0",
    "crypto": "^1.0.1",
    "crypto-browserify": "^3.12.0",
    "http-proxy-middleware": "^2.0.6",
    "mysql": "^2.18.1",
    "mysql2": "^3.2.0",
    "process": "^0.11.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "timers-browserify": "^2.0.12",
    "util": "^0.12.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "browserify-zlib": "^0.2.0",
    "net-browserify": "^0.2.4",
    "stream-browserify": "^3.0.0",
    "tls-browserify": "^0.2.2"
  }
}

问题排查与修复方案 #

1. 字段大小写不匹配 #

排序逻辑中使用b.score - a.score（小写s），但渲染时用value.Score（大写S），后端返回的字段名必须和代码中完全一致。如果后端返回score，则渲染时改为value.score；如果返回Score，排序时改为b.Score - a.Score。同时检查value.Name、value.location、value.Image的字段大小写，确保和后端返回结构对齐。

2. 避免直接修改原状态数组 #

Array.sort()会直接修改原数组，违反React状态不可变原则，可能导致渲染异常。修改排序逻辑：

// 复制原数组后再排序，避免修改原状态
const sortedLeaderboard = [...Leaderboard].sort((a, b) => b.score - a.score);

3. 检查样式是否导致元素不可见 #

查看index.css中相关类的样式：

• 确保.flex设置了display: flex，否则布局错乱；
• 检查文本颜色是否与背景色一致，导致内容不可见；
• 确认元素有足够的内边距/外边距，避免内容被挤压或隐藏。

4. 增加数据校验（可选） #

在渲染前校验数据结构，避免因字段缺失导致空渲染：

function item(Leaderboard) {
  return (
    <>
      {Leaderboard.map((value, index) => (
        <div className="flex" key={index}>
          <div className="item">
            <img src={value?.Image || ''} alt="用户头像" />
            <div className="info">
              <h3 className="name text-dark">{value?.Name || '匿名用户'}</h3>
              <span>{value?.location || '未知地区'}</span>
            </div>
          </div>
          <div className="item">
            <span>{value?.score ?? 0}</span>
          </div>
        </div>
      ))}
    </>
  );
}

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