Blazor WASM调用API返回JSON后反序列化为数组类型报错如何解决

错误根因 #

你调用的API返回的是单个包含ArenaDetails数组的JSON对象（外层为{}包裹），但你指定的反序列化目标类型是parentArenas[]数组（要求外层为[]包裹的JSON数组），类型不匹配导致反序列化失败。

直接修复步骤 #

1. 调整变量声明，把数组类型改为单个实体类型，也可根据页面使用习惯直接暴露场地列表：

// 原声明
// private parentArenas[] arenas;
// 修改后 保留原实体结构
private parentArenas arenas;
// 如果页面只需要遍历场地列表，也可以直接声明为List<ArenaDetail>
// private List<ArenaDetail> arenaDetails;

2. 修改反序列化代码，匹配返回的单个对象类型：

// 原代码
// arenas = JsonConvert.DeserializeObject<parentArenas[]>(stringresponse);
// 修改后
arenas = JsonConvert.DeserializeObject<parentArenas>(stringresponse);
// 如果直接用场地列表，取属性值即可
// arenaDetails = arenas?.ArenaDetails;

更优实现方案 #

针对Blazor WebAssembly场景，有以下可优化点：

• 不要手动实例化HttpClient，Blazor默认已经注册了适配WASM的HttpClient，直接注入使用即可，避免连接池泄露问题
• 可以直接用System.Net.Http.Json扩展方法读取响应，无需手动转字符串再反序列化，代码更简洁
• 增加响应状态校验，避免API报错时后续逻辑出现空引用
  优化后代码示例：

// 首先注入HttpClient
[Inject]
private HttpClient Http { get; set; }
// 直接声明页面要用的场地列表，初始化空集合避免渲染时报空引用
private List<ArenaDetail> ArenaDetails { get; set; } = new();
protected override async Task OnInitializedAsync()
{
    var source = new CancellationTokenSource();
    var myguid= new Centre { myguid= "CA8E99BC-F5B0-4A54-A8BF-C9AE9E95EE44" };
    var response = await Http.PostAsJsonAsync(
        "https://api.azurewebsites.net/api/GetAllArenas?code=Nve2P5GcqexzAvAnvOYqBySLT6SuRDQpBHA==", 
        myguid, 
        source.Token);
    // 先校验响应是否成功
    if (response.IsSuccessStatusCode)
    {
        var result = await response.Content.ReadFromJsonAsync<parentArenas>(cancellationToken: source.Token);
        ArenaDetails = result?.ArenaDetails ?? new();
    }
}

页面中直接遍历ArenaDetails即可使用：

@foreach (var arena in ArenaDetails)
{
    <div>场地名称：@arena.ArenaName</div>
    <div>场地地址：@arena.ArenaAddress</div>
}

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