为什么在react中有些数据没有传递到客户端？

Question

我有一个可以完全获取所有数据的 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、message 和 dailyWorkplan!!!!

有什么问题吗？

Answer 1

问题出在 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
    );