Blazor在FluentUI组件内调用递归函数致项目崩溃的解决方法

问题分析 #

编译无错误但运行崩溃，核心原因是RenderFragment递归调用未正确关联渲染构建器：

• BuildFirstFragment中直接调用BuildTreeItemFragment(children)，但未将生成的RenderFragment通过__builder添加到渲染树，导致FluentTreeView无法识别子内容，引发渲染异常。
• 数组处理逻辑存在空分支，且重复解析JsonDocument造成冗余，可能触发潜在的资源泄漏。

修复方案 #

1. 显式关联渲染构建器：在RenderFragment内部使用__builder.AddContent()方法，将递归生成的子内容注入到渲染流程中。
2. 优化Json解析：直接复用已有的JsonElement进行枚举，避免重复调用JsonDocument.Parse。
3. 完善数组处理：补充字符串类型数组项的渲染逻辑，消除空分支。

修正后的完整代码 #

@using System.Text.Json

<h3>Json View</h3>

<FluentGrid Spacing="3" Justify="JustifyContent.FlexStart">
    <FluentGridItem xs="12" sm="6">
        <FluentTreeView>
            @BuildFirstFragment
        </FluentTreeView>
    </FluentGridItem>
</FluentGrid>

@code {
    private RenderFragment BuildFirstFragment => __builder =>
    {
        using var jsonDoc = JsonDocument.Parse(json);
        JsonElement docRoot = jsonDoc.RootElement;
        var children = docRoot.EnumerateObject().ToList();
        
        // 显式将子RenderFragment添加到渲染构建器
        __builder.AddContent(0, BuildTreeItemFragment(children));
    };

    private RenderFragment<List<JsonProperty>> BuildTreeItemFragment => propertyList => __builder =>
    {
        foreach (var property in propertyList)
        {
            var jsonName = property.Name;
            var jsonVal = property.Value;
            
            if (jsonVal.ValueKind == JsonValueKind.Object)
            {
                var children = jsonVal.EnumerateObject().ToList();
                <FluentTreeItem Text="@jsonName">
                    @BuildTreeItemFragment(children)
                </FluentTreeItem>
            }
            else if (jsonVal.ValueKind == JsonValueKind.Array)
            {
                <FluentTreeItem Text="@jsonName">
                    @foreach (var jElm in jsonVal.EnumerateArray())
                    {
                        if (jElm.ValueKind == JsonValueKind.String)
                        {
                            <FluentTreeItem Text="@jElm.GetString()"></FluentTreeItem>
                        }
                        else if (jElm.ValueKind == JsonValueKind.Object)
                        {
                            var children = jElm.EnumerateObject().ToList();
                            @BuildTreeItemFragment(children)
                        }
                    }
                </FluentTreeItem>
            }
            else
            {
                var displayValue = jsonVal.ValueKind switch
                {
                    JsonValueKind.Number => jsonVal.GetDouble().ToString(),
                    JsonValueKind.True or JsonValueKind.False => jsonVal.GetBoolean().ToString(),
                    JsonValueKind.Null => "null",
                    _ => jsonVal.GetString() ?? ""
                };
                <FluentTreeItem Text="@($"{jsonName}: {displayValue}")"></FluentTreeItem>
            }
        }
    };

    string json = @"{
    ""name"": ""Adeel Solangi"",
    ""language"": ""Sindhi"",
    ""id"": ""V59OF92YF627HFY0"",
    ""bio"": ""Donec lobortis eleifend condimentum. Cras dictum dolor lacinia lectus vehicula rutrum. Maecenas quis nisi nunc. Nam tristique feugiat est vitae mollis. Maecenas quis nisi nunc."",
    ""version"": 6.1,
    ""subitmes"": {
        ""name"": ""Afzal Ghaffar"",
        ""language"": ""Sindhi"",
        ""id"": ""ENTOCR13RSCLZ6KU"",
        ""bio"": ""Aliquam sollicitudin ante ligula, eget malesuada nibh efficitur et. Pellentesque massa sem, scelerisque sit amet odio id, cursus tempor urna. Etiam congue dignissim volutpat. Vestibulum pharetra libero et velit gravida euismod."",
        ""version"": 1.88
    },
    ""hobbies"": [""reading"", ""coding"", {""name"": ""gaming"", ""platform"": ""PC""}]
}";
}

关键修复点说明 #

• BuildFirstFragment中添加__builder.AddContent(0, BuildTreeItemFragment(children))，确保递归生成的内容被正确纳入渲染树。
• 移除重复的JsonDocument.Parse调用，直接使用jsonVal.EnumerateObject()/EnumerateArray()处理子节点。
• 补充了数组中字符串项的渲染，并对基础类型值进行格式化显示，提升树形视图的可读性。
• 对JsonDocument使用using语句，确保资源及时释放，避免内存泄漏。

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