我有一个 API,可以完全获取所有数据。我通过单元测试测试了这个案例,结果是可以的。API: [Route(\'/home/PackageStatus\')] [Authorize(Roles = \'Guard,User,Beneficiary,
我有一个可以完整获取所有数据的 API。我通过单元测试测试了这个案例,结果没问题。
API:
[Route("/home/PackageStatus")]
[Authorize(Roles = "Guard,User,Beneficiary,Developer,Guest,Admin")]
[HttpGet]
public IActionResult PackageStatus()
{
try
{
PackageStatusResult data = new PackageStatusResult();
data.LastPackageData = new LastPackageData();
data.LastCommand = new LastPackageCommand();
data.Drives = new List<Drive>();
data.Pumps = new List<Pump>();
data.WorkPlans = new List<DailyWorkPlan>();
using (SpmsTest1Context db = new SpmsTest1Context())
{
data.Drives = db.Drive.ToList();
data.Pumps = db.Pump.ToList();
data.LastPackageData = db.LastPackageData.First();
data.Package = db.Package.First();
data.WorkPlans = db.DailyWorkPlan.ToList();
data.LastCommand = db.LastPackageCommand.First();
data.Message = db.Message.First().Description;
}
return Ok(new JsonData()
{
IsSuccess = true,
Message = "ok",
Data = data
});
}
catch (Exception e)
{
return BadRequest(new JsonData()
{
IsSuccess = false,
Message ="Error",
Data = null
});
}
}
另一方面,我有一个调用此 API 的组件
成分 :
const package2 = () => {
const [fetchDataStatus, setfetchDataStatus] = useState("");
const [info, setInfo] = useState({
isSuccess: false,
message:"",
data: {
drives: [],
pumps: [],
lastPackageData: {
driveConnection1: false,
coolingWater1: false,
frequency1: 0,
power1: 0,
current1: 0,
fault1: "0",
pumpOutputPressure1: 0,
coolingWaterTemprature1: 0,
driveConnection2: false,
coolingWater2: false,
frequency2: 0,
power2: 0,
current2: 0,
fault2: "0",
pumpOutputPressure2: 0,
coolingWaterTemprature2: 0,
phaseControl: false
},
package: {
},
workPlans: [{
id: 0,
thrustPressure:0
}],
lastCommand: {
isActive: false,
workPlan: 0,
frequency: 0,
thrustPressure: 0,
isActivePump1: false,
isActivePump2: false,
fromScada: false
},
message: ""
}
});
useInterval(
() => {
setfetchDataStatus("loading");
fetch('/home/PackageStatus')
.then(response => response.json())
.then((response) => {
if (!response) {
setfetchDataStatus("loading-lost");
} else {
setfetchDataStatus("loading-ok");
}
setInfo(response);
//console.log(data);
}).catch(error => {
setfetchDataStatus("loading-error");
console.error('Fetch error:', error);
});
//.then((data) => {
// console.log(data);
//});
},
500
);
function handleOnFocus(e: ChangeEvent<HTMLInputElement>) {
e.target.blur();
}
function handleWorkPlanChange(event: ChangeEvent<HTMLSelectElement>): void {
throw new Error("Function not implemented.");
}
return (
<React.Fragment>
</React.Fragment>
)
};
export default package2;
当我运行项目时,3 个字段的数据会加载,但其他字段则不会。
仅加载 , lastCommand 消息 和 dailyWorkplan
public class JsonData
{
public bool IsSuccess { get; set; }
public object? Data { get; set; }
public string? Message { get; set; }
}
问题是什么?
问题出在 API 上,因为 API 只返回 3 个字段。React 组件是正确的。您可以验证 API 结构 ,看看它是否需要一些 参数 来提供所有数据。
或者您可以使用 console.log 调试数据
useInterval(
() => {
setfetchDataStatus("loading");
fetch('/home/PackageStatus')
.then(response => response.json())
.then((response) => {
console.log("API Response:", response); // Log the response for debugging
if (!response) {
setfetchDataStatus("loading-lost");
} else {
setfetchDataStatus("loading-ok");
setInfo(prevInfo => ({
...prevInfo,
...response,
data: {
...prevInfo.data,
...response.data
}
}));
}
}).catch(error => {
setfetchDataStatus("loading-error");
console.error('Fetch error:', error);
});
},
500
);
的定义中犯了一个错误 PackageStatusResult 。我在 items 中添加了 { get; set; } 并修复了。
public class PackageStatusResult
{
public List<Drive> ;
public List<Pump> ;
public LastPackageData ;
public Package Package ;
public List<DailyWorkPlan> WorkPlans { get; set; }
public LastPackageCommand LastCommand { get; set; }
public String Message { get; set; }
}