React中部分API数据无法传递到客户端的问题排查

1. JsonData类的Data属性类型导致序列化丢失字段 #

你的JsonData类中Data属性定义为object?类型，当你将PackageStatusResult实例赋值给它时，ASP.NET Core的JSON序列化器无法识别对象的实际类型，可能导致部分属性无法被正确序列化。而单元测试直接操作C#对象，不会触发JSON序列化，所以能拿到完整数据。

解决方法：将JsonData改为泛型类（推荐），或者明确指定Data的类型为PackageStatusResult：

// 泛型版本
public class JsonData<T>
{
    public bool IsSuccess { get; set; }
    public T? Data { get; set; }
    public string? Message { get; set; }
}

// API返回时使用泛型
return Ok(new JsonData<PackageStatusResult>()
{
    IsSuccess = true, 
    Message = "ok", 
    Data = data
});

或者直接修改JsonData的Data类型：

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

2. JSON字段大小写不匹配 #

.NET类属性默认使用PascalCase（大驼峰）（如Drives、LastPackageData），而你React状态中定义的是camelCase（小驼峰）（如drives、lastPackageData）。若ASP.NET Core未配置驼峰命名序列化，API返回的JSON字段会是大驼峰，此时用小驼峰访问（如info.data.drives）会取不到值。

你可以通过浏览器开发者工具的Network标签，查看/home/PackageStatus请求的响应内容，确认字段名大小写是否匹配。

解决方法：在ASP.NET Core中配置JSON序列化使用驼峰命名，在Program.cs中添加：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase;
    });

3. 实体类存在循环引用或序列化限制 #

如果Drive、Pump等实体类与其他EF Core实体存在循环引用（如Drive关联Package，Package又关联Drive），JSON序列化时会自动跳过这些属性避免无限递归。另外，若实体类属性没有公共getter，或被标记[JsonIgnore]特性，也会导致字段不被序列化。

解决方法：

• 配置JSON序列化忽略循环引用：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.IgnoreCycles;
    });

• 检查实体类属性，确保需要返回的属性都有公共getter，且未被标记[JsonIgnore]。

4. React状态字段名与API返回不匹配 #

你的React组件初始化info的data字段用了小驼峰，若API返回大驼峰字段，执行setInfo(response)后，info.data中会同时存在初始化的空字段（如drives）和API返回的实际字段（如Drives），此时访问info.data.drives自然拿不到数据。

解决方法：确保React访问的字段名与API返回完全一致，或拿到响应后手动映射字段：

.then((response) => {
    const mappedData = {
        ...response,
        data: {
            drives: response.data.Drives,
            pumps: response.data.Pumps,
            lastPackageData: response.data.LastPackageData,
            package: response.data.Package,
            workPlans: response.data.WorkPlans,
            lastCommand: response.data.LastCommand,
            message: response.data.Message
        }
    };
    setInfo(mappedData);
})

内容的提问来源于stack exchange，提问作者hmahdavi