Blazor级联参数相互干扰：为何两个参数值显示一致？

你遇到的两个变量显示一致的问题，源于两处代码错误：

1. 级联参数类型不匹配 #

父组件（index）中selectedNumberTwo定义为非可空int类型，但子组件中对应的级联参数是可空int?类型。虽然C#允许隐式转换，但Blazor的级联绑定机制在类型不一致时，可能出现值传递异常，导致子组件无法正确接收selectedNumberTwo的更新值。

2. 异步方法缺少等待逻辑 #

SelectNumberOne和SelectNumberTwo标记为async Task，但内部没有任何异步等待操作。这种写法会触发编译器警告，甚至干扰Blazor的渲染生命周期，导致UI无法及时响应选中值的变化。

修正后的代码 #

父组件（index）代码修改 #

将selectedNumberTwo改为可空int?类型，与子组件参数保持一致；同时将异步方法改为同步方法（或补充异步等待逻辑）：

<div class="col-sm-12 col-lg-2">
    <select class="fluent-input" @onchange="SelectNumberOne">
        @for (int i = 10; i < 20 + 9; i++)
        {
            <option value="@i">@i</option>       
        }
    </select>
</div>

<div class="col-sm-12 col-lg-2">
    <select class="fluent-input" @onchange="SelectNumberTwo">
        @for (int i = 10; i < 20 + 9; i++)
        {
            <option value="@i">@i</option>
        }
    </select>
</div>

<MudCard Elevation="1" Class="mb-5">
    <CascadingValue Value="selectedNumberOne" Name="one">
        <CascadingValue Value="selectedNumberTwo" Name="two">
            <TestComponent @ref="testComponent"></TestComponent>
        </CascadingValue>
    </CascadingValue>
</MudCard>

@code{
    TestComponent? testComponent;

    private int? selectedNumberOne { get; set; }
    // 改为可空int类型，匹配子组件参数
    private int? selectedNumberTwo { get; set; }

    // 改为同步方法，避免异步无等待问题
    void SelectNumberOne(ChangeEventArgs e)
    {
        selectedNumberOne = Convert.ToInt32(e.Value.ToString());
    }

    void SelectNumberTwo(ChangeEventArgs e)
    {
        selectedNumberTwo = Convert.ToInt32(e.Value.ToString());
    }

    // 若需保留异步方法，需补充await逻辑
    // async Task SelectNumberOne(ChangeEventArgs e)
    // {
    //     selectedNumberOne = Convert.ToInt32(e.Value.ToString());
    //     await Task.CompletedTask;
    // }

    // async Task SelectNumberTwo(ChangeEventArgs e)
    // {
    //     selectedNumberTwo = Convert.ToInt32(e.Value.ToString());
    //     await Task.CompletedTask;
    // }
}

子组件代码无需修改 #

子组件的级联参数Name已正确匹配父组件的CascadingValue，类型修正后即可正常接收值。

修正完成后，选择不同数字时，子组件将正确展示两个独立的选中值。

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