.NET 8 Blazor WASM调用API解析数据时渲染报错求助

你遇到的核心问题是InteractiveWebAssembly模式下的预渲染与客户端服务不兼容：默认预渲染阶段会在服务器执行OnInitializedAsync，但你的IBlobService、ISqlService等服务仅在客户端实现，服务器端无对应逻辑，导致预渲染时获取的字符串为空或格式错误，客户端接管后解析空内容抛出JSON异常。禁用预渲染后出现路由问题，是因为服务器未配置Blazor路由回退规则。

1. 仅在客户端执行数据逻辑（快速修复） #

修改OnInitializedAsync方法，判断当前运行环境，只在浏览器（客户端）执行数据获取和解析操作：

protected override async Task OnInitializedAsync()
{
    // 仅在客户端环境执行，跳过预渲染阶段的服务调用
    if (OperatingSystem.IsBrowser())
    {
        BCDiners = await blobHelper.GetStrings();
        MTServiceDiners = await sqlHelper.GetLastestDiners();

        MTServiceParsed = await dinersParser.ParseDiners(MTServiceDiners);
        BCParsed = await dinersParser.ParseDiners(BCDiners);
    }
}

同时调整页面渲染逻辑，避免空引用错误：

<div style="display: flex; gap: 1rem;">
    <div style="flex: 1; border: 1px solid #ccc; padding: 1rem;">
        <h3>MT Service Parsed</h3>
        @(MTServiceParsed?.tbh != null ? MTServiceParsed.tbh.AgencyCurrency : "Loading...")
    </div>

    <div style="flex: 1; border: 1px solid #ccc; padding: 1rem;">
        <h3>BC Parsed</h3>
        @(BCParsed != null ? "数据已加载" : "Loading...")
        @* @DisplayDinersFile(BCParsed) *@
    </div>
</div>

2. 为预渲染提供服务器端服务实现（支持预渲染） #

如果需要预渲染显示数据，需在服务器项目的Program.cs中注册对应服务的服务器端实现：

// 替换为你的服务器端服务实现类
builder.Services.AddScoped<IBlobService, ServerBlobService>();
builder.Services.AddScoped<ISqlService, ServerSqlService>();
builder.Services.AddScoped<IDinersParse, ServerDinersParse>();

服务器端服务需实现相同接口，返回与客户端一致格式的字符串，确保预渲染时数据有效。

3. 禁用预渲染并修复路由问题 #

若选择禁用预渲染，修改页面的渲染模式：

@rendermode InteractiveWebAssembly(prerender: false)

然后在服务器项目的Program.cs中添加路由回退配置，解决路由404问题：

// 放在所有路由配置的最后
app.MapFallbackToFile("index.html");

如果问题仍存在，可通过以下方式定位具体错误：

• 在OnInitializedAsync中添加日志，打印获取到的字符串内容：

  Console.WriteLine("MTServiceDiners: " + MTServiceDiners);
  Console.WriteLine("BCDiners: " + BCDiners);
  

  查看浏览器控制台输出，确认是哪一个字符串为空或格式不符合解析要求，针对性修复服务端返回的数据格式。

内容的提问来源于stack exchange，提问作者Mikkel Rohde Glerup