Blazor组件调用EventCallback时Test参数无法递增，如何设置默认参数？

问题现象 #

点击子组件按钮触发OnClick时，Test参数仅能递增一次（始终显示2）；移除EventCallback调用或父组件的Test=1参数传递，则Test可正常持续递增。需求是给Test设置默认值，同时避免调用EventCallback时参数被重置。

问题根源 #

父组件中硬编码了Test=1，每次调用EventCallback会触发父组件重新渲染，此时子组件的Test参数会被父组件传入的1覆盖。子组件内的Test++仅在当前渲染周期有效，下一次渲染又回到初始值1，再加1后显示2，因此每次输出都是2。

解决方案 #

方案一：父组件维护状态（推荐，符合Blazor组件设计规范） #

让父组件持有Test的状态，子组件通过EventCallback传递更新后的值，父组件更新自身状态后再传递给子组件，保证数据单向流动。

Index.razor

<MyComponent @ref="MyComponent1" Test="@parentTest" OnChange="OnChange"></MyComponent>

Index.razor.cs

namespace MyApp.Web.Pages.Transactions
{
    public partial class List : ComponentBase
    {
        private MyComponent MyComponent1 { get; set; } = default!;
        private int parentTest = 1;

        public void OnChange(int updatedTest)
        {
            parentTest = updatedTest;
            System.Console.WriteLine(parentTest);
        }
    }
}

MyComponent.razor.cs

namespace Accounting.Web.Components.MonthPicker
{
    public partial class MonthPicker
    {
        [Parameter]
        public EventCallback<int> OnChange { get; set; } = default!;
    
        [Parameter]
        public int Test { get; set; } = 1;
    
        private void OnClick()
        {
            var newTest = Test + 1;
            OnChange.InvokeAsync(newTest);
        }
    }
}

方案二：子组件维护内部状态 #

如果不需要父组件同步Test的状态，可以让子组件自己维护内部状态，将参数作为初始值使用，仅在组件初始化时赋值。

MyComponent.razor.cs

namespace Accounting.Web.Components.MonthPicker
{
    public partial class MonthPicker
    {
        [Parameter]
        public EventCallback OnChange { get; set; } = default!;
    
        // 用InitialTest作为初始值参数，设置默认值
        [Parameter]
        public int InitialTest { get; set; } = 1;
        
        private int _test;

        protected override void OnInitialized()
        {
            _test = InitialTest;
        }
    
        private void OnClick()
        {
            _test++;
            OnChange.InvokeAsync();
            // 若需要父组件获取最新值，可在回调中传递_test
            // OnChange.InvokeAsync(_test);
        }
    }
}

Index.razor

<MyComponent @ref="MyComponent1" InitialTest=1 OnChange="OnChange"></MyComponent>

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