MudBlazor日期选择器值变更时如何触发API数据获取

MudDatePicker 的 @bind-Date 是Blazor提供的双向绑定语法糖，你可以把它拆成手动值绑定 + 变更事件回调，在值变更的回调里直接触发数据拉取逻辑，这是最符合组件设计规范的实现方式：

<MudDatePicker Date="@_chosenDate" DateChanged="OnDateChanged" />

@code {
    private DateTime? _chosenDate = DateTime.Now.Date;
    private int data = 0;

    protected override async Task OnInitializedAsync()
    {
        // 组件初始化时拉取默认选中的当日数据
        await FetchData();
    }

    private async Task OnDateChanged(DateTime? newDate)
    {
        // 先给绑定字段赋值，保证日期选择器显示值正确
        _chosenDate = newDate;
        // 校验日期非空再发起请求，避免空值调用接口
        if (_chosenDate.HasValue)
        {
            await FetchData();
        }
    }

    private async Task FetchData()
    {
        data = await FetchDataFromApi(_chosenDate);
    }
}

如果你想保留@bind的简写写法，也可以把绑定目标改成带自定义逻辑的属性，在setter里触发数据拉取：

<MudDatePicker @bind-Date="@ChosenDate" />

@code {
    private DateTime? _chosenDate = DateTime.Now.Date;
    private int data = 0;
    private DateTime? _lastFetchedDate;

    private DateTime? ChosenDate
    {
        get => _chosenDate;
        set
        {
            _chosenDate = value;
            // 日期和上次拉取数据的日期不一致时才触发请求，避免重复调用
            if (_chosenDate != _lastFetchedDate && _chosenDate.HasValue)
            {
                _ = FetchData();
            }
        }
    }

    protected override async Task OnInitializedAsync()
    {
        await FetchData();
    }

    private async Task FetchData()
    {
        data = await FetchDataFromApi(_chosenDate);
        _lastFetchedDate = _chosenDate;
    }
}

注意事项 #

• 因为_chosenDate是可空DateTime类型，请求接口前一定要做HasValue校验，避免用户清空日期选择器时触发无效API请求
• 如果存在用户快速切换日期的场景，可以在回调里加300ms左右的防抖逻辑，减少不必要的接口调用
• 不要在OnAfterRender这类渲染生命周期里轮询字段变化拉取数据，会导致重复渲染，性能很差

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