使用Axios将JSON字符串从c#控制器拉到React页面

Question

我正在尝试制作一个由4个对象组成的JSON字符串，并将其从我的c#控制器发送到我的React函数与Axios，并将数据放入我的div的类名中，以根据它们是否活跃来改变它们的样式。用我的代码，我得到一个UncaughtTypeError:不能读取null的属性(读取'0')。我认为数据没有到达函数，但我不确定为什么。下列代码:

serverstatus .js(我试图设置classNames的值)

import React, { useState, useEffect } from 'react';
import axios from "axios";
function ServerStatuses() {
const [serverCycleData, setServerCycleData] = useState(null);
useEffect(() => {
//sets the interval for the serverCycle data to be sent over every 2 seconds
const serverCycleData = () => {
axios.get("/serverCycle")
.then(res => {
setServerCycleData(res.data);
})
}
serverCycleData();
const interval = setInterval(() => {
serverCycleData()
}, 50000);
return () => clearInterval(interval);
}, []);
return (
<div id="statuses">
<div id="LWStatus" className={serverCycleData[0].className}>SERVER</div>
<div id="CONAStatus" class={serverCycleData[1].className}>CONA</div>
<div id="PDAStatus" class={serverCycleData[2].className}>PDA</div>
<div id="OverallStatus" class={serverCycleData[3].className}>ERROR</div>
</div>
)
};
export default ServerStatuses;

ProductionController.cs(第一个是我的API调用)

[HttpGet]
[Route("/hGrabLocation")]
public string GrabLocation()
{
var plantLocation = "LOCATION HERE";
//using the object here to pull the data
if (ObjSiteConfiguration.Initialized)
{
plantLocation = ObjSiteConfiguration.Palletizers[0].PlantName;
}
else
{
plantLocation = "Site not initialized";
}
return plantLocation;
}

ProductionController.cs(这只是我在开始时为要存储和从中提取的值创建的列表)

private List<ObjServerStatus> serverStatuses = new()
{
new ObjServerStatus{serverType = "LW", serverStatus = false, statusClass = "header-icon_error"},
new ObjServerStatus{serverType = "CONA", serverStatus = false, statusClass = "header-icon_error"},
new ObjServerStatus{serverType = "PDA", serverStatus = false, statusClass = "header-icon_error"},
new ObjServerStatus{serverType = "OVERALL", serverStatus = false, statusClass = "header-icon_error"}
};

我试着运行网站，一直得到一个未捕获的类型错误:不能读取null的属性(读取'0')。我希望有我的头加载和div标签将加载与正确的类附加。

Answer 1

响应加载前，serverCycleData初始为null

添加一个早期的返回语句

function ServerStatuses() {
const [serverCycleData, setServerCycleData] = useState(null);
useEffect(() => {
//sets the interval for the serverCycle data to be sent over every 2 seconds
const serverCycleData = () => {
axios.get("/serverCycle").then((res) => {
setServerCycleData(res.data);
});
};
serverCycleData();
const interval = setInterval(() => {
serverCycleData();
}, 50000);
return () => clearInterval(interval);
}, []);
if (!serverCycleData) return null
return (
<div id="statuses">
<div id="LWStatus" className={serverCycleData[0].className}>
SERVER
</div>
<div id="CONAStatus" class={serverCycleData[1].className}>
CONA
</div>
<div id="PDAStatus" class={serverCycleData[2].className}>
PDA
</div>
<div id="OverallStatus" class={serverCycleData[3].className}>
ERROR
</div>
</div>
);
}

或者使用可选的链接

function ServerStatuses() {
const [serverCycleData, setServerCycleData] = useState(null);
useEffect(() => {
//sets the interval for the serverCycle data to be sent over every 2 seconds
const serverCycleData = () => {
axios.get("/serverCycle").then((res) => {
setServerCycleData(res.data);
});
};
serverCycleData();
const interval = setInterval(() => {
serverCycleData();
}, 50000);
return () => clearInterval(interval);
}, []);
return (
<div id="statuses">
<div id="LWStatus" className={serverCycleData?.[0].className}>
SERVER
</div>
<div id="CONAStatus" class={serverCycleData?.[1].className}>
CONA
</div>
<div id="PDAStatus" class={serverCycleData?.[2].className}>
PDA
</div>
<div id="OverallStatus" class={serverCycleData?.[3].className}>
ERROR
</div>
</div>
);
}

Answer 2

React每次"确定需要"时都会运行ServerStatus块。其中一个时间将是在您的useEffect运行之前的第一次通过。

在那个点

const [serverCycleData, setServerCycleData] = useState(null);

表示serverCycleData的useEffect中的变量将为空。

一种选择是用一个你可以遵从的数组来初始化(例如，将你期望从服务器得到的状态数组设置为一些有意义的东西，比如"等待服务器")。

可以像这样:

const [serverCycleData, setServerCycleData] = useState(["header-icon_waiting_for_server","header-icon_waiting_for_server", "header-icon_waiting_for_server", "header-icon_waiting_for_server" ]);