Blazor组件重渲染时ActiveStep参数值无法保持的问题

你遇到的问题本质是Blazor组件参数的单向数据流特性导致的：

在父组件中，你给MyComponent的ActiveStep硬编码了固定值1，每次父组件发生渲染（比如点击Next/Previous按钮触发组件更新），都会将ActiveStep重新设置为1，覆盖子组件内部修改后的值。

而当你不设置初始值时，父组件没有传递ActiveStep参数，子组件使用自身的默认值0，此时子组件内部对ActiveStep的修改不会被父组件干预，所以功能正常。

方案1：父组件维护状态并使用双向绑定 #

在父组件中维护ActiveStep的状态，通过双向绑定让父组件和子组件同步这个值：

1. 子组件中添加EventCallback用于通知父组件值的变更：

[Parameter]
public int ActiveStep { get; set; } = 0;

[Parameter]
public EventCallback<int> ActiveStepChanged { get; set; }

public async Task NextStepAsync()
{
    ActiveStep++;
    await ActiveStepChanged.InvokeAsync(ActiveStep);
}

public async Task PreviousStepAsync()
{
    if(ActiveStep > 0)
    {
        ActiveStep--;
        await ActiveStepChanged.InvokeAsync(ActiveStep);
    }
}

2. 父组件中维护状态并使用双向绑定：

<button class="e-btn" @onclick="Previous">Previous</button>
<button class="e-btn" @onclick="Next">Next</button>

<MyComponent @ref="_instance" @bind-ActiveStep="_activeStep">
    <ComponentItems>
        <ComponentItem Label="Cart" IconCss="sf-icon-cart"></ComponentItem>
        <ComponentItem Label="Address" IconCss="sf-icon-user"></ComponentItem>
        <ComponentItem Label="Delivery" IconCss="sf-icon-transport"></ComponentItem>
        <ComponentItem Label="Payment" IconCss="sf-icon-payment"></ComponentItem>
    </ComponentItems>
</MyComponent>

@code {
    private MyComponent _instance { get; set; }
    private int _activeStep = 1; // 父组件维护状态

    private async Task Next()
    {
        await _instance.NextStepAsync();
    }

    private async Task Previous()
    {
        await _instance.PreviousStepAsync();
    }
}

方案2：让子组件完全管理内部状态 #

如果你希望ActiveStep完全由子组件内部管理，不要在父组件中硬编码传递固定值。如果需要设置初始值，可以通过子组件的初始化方法或者单独的参数来实现：

1. 子组件用私有字段维护内部状态：

[Parameter]
public int InitialActiveStep { get; set; } = 0;

private int _activeStep;

protected override void OnInitialized()
{
    _activeStep = InitialActiveStep;
    base.OnInitialized();
}

public async Task NextStepAsync()
{
    _activeStep++;
    // 需要通知父组件的话，可添加对应EventCallback
}

public async Task PreviousStepAsync()
{
    if(_activeStep > 0)
    {
        _activeStep--;
    }
}

2. 父组件中传递初始值：

<MyComponent @ref="_instance" InitialActiveStep="1">
    <!-- ... 其他内容 ... -->
</MyComponent>

Blazor的组件参数是父组件驱动的，父组件负责提供参数值，子组件不应该直接修改参数值（语法上允许，但会导致状态不一致）。正确的做法是通过EventCallback将参数变更通知给父组件，由父组件更新状态后再同步给子组件。

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