从C#控制器通过Axios向React传JSON遇空指针错误

问题根源分析 #

• 初始状态未处理：组件初始化时serverCycleData为null，渲染阶段直接访问serverCycleData[0]触发空值读取错误
• API路由不匹配：React请求的是/serverCycle，但提供的C#控制器无对应接口，数据无法正常获取
• 属性名称不匹配：C#对象中样式类属性是statusClass，但React代码尝试读取className，即使数据传递成功也无法拿到正确值

分步解决方案 #

1. 修复初始渲染空值问题 #

给状态设置合理初始值，同时使用安全访问方式避免报错：

import React, { useState, useEffect } from 'react';
import axios from "axios";

function ServerStatuses() {
    // 初始值设为空数组，替代null避免报错
    const [serverCycleData, setServerCycleData] = useState([]);

    useEffect(() => {
        const fetchServerCycleData = () => {
            axios.get("/serverCycle")
                .then(res => {
                    setServerCycleData(res.data);
                })
                .catch(err => {
                    console.error('获取服务器状态失败:', err);
                })
        }
        fetchServerCycleData();
        const interval = setInterval(fetchServerCycleData, 50000);
        return () => clearInterval(interval);
    }, []);

    // 使用可选链安全访问属性，同时提供默认样式类
    return (
        <div id="statuses">
            <div id="LWStatus" className={serverCycleData[0]?.statusClass || 'default-status'}>SERVER</div>
            <div id="CONAStatus" className={serverCycleData[1]?.statusClass || 'default-status'}>CONA</div>
            <div id="PDAStatus" className={serverCycleData[2]?.statusClass || 'default-status'}>PDA</div>
            <div id="OverallStatus" className={serverCycleData[3]?.statusClass || 'default-status'}>ERROR</div>
        </div>
    )
};

export default ServerStatuses;

2. 补充C#对应API接口 #

在ProductionController中添加/serverCycle的GET接口，返回状态列表：

[HttpGet]
[Route("/serverCycle")]
public IActionResult GetServerCycleStatuses()
{
    // 自动序列化为JSON返回
    return Ok(serverStatuses);
}

3. 统一属性名称 #

两种可选方式：

• 修改C#的ObjServerStatus类，将statusClass改为className：

public class ObjServerStatus
{
    public string serverType { get; set; }
    public bool serverStatus { get; set; }
    public string className { get; set; }
}

• 保持C#属性不变，React中直接读取statusClass（已在第一步的代码中实现）

额外排查点 #

• 查看浏览器控制台网络请求，确认/serverCycle请求是否成功、返回数据格式是否正确
• 确认后端跨域配置是否正确（若React与后端不在同一域名下）
• 检查C#后端serverStatuses列表是否已正确初始化

内容的提问来源于stack exchange，提问作者HA-11-SIAWN