8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

为什么 React 中有些数据没有传递给客户端?

Pux 3月前

27 0

我有一个 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

enter image description here enter image description here

public class JsonData
{
    public bool IsSuccess { get; set; }
    public object? Data { get; set; }
    public string? Message { get; set; }
}

问题是什么?

帖子版权声明 1、本帖标题:为什么 React 中有些数据没有传递给客户端?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Pux在本站《c#》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 问题出在 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; }
    }
    
返回
作者最近主题: