You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Blazor级联参数传递至子组件存在延迟问题求助

问题:Blazor中MudAutocomplete筛选与子组件结果不同步

在Blazor中使用CascadingParameter实现父子组件数据传递时,从MudAutocomplete下拉列表选择用户后,子组件要等到筛选条件被移除才能接收到新的筛选值,导致筛选条件与显示结果始终不匹配。已尝试通过事件委托让子组件在OnInitialized中注册事件处理,但问题仍存在。

已在mudblazor在线环境复现该问题,以下是完整代码示例:

父组件代码

<MudItem sm="12" md="6">
    <MudAutocomplete Value="UserFilter" ValueChanged="OnNameValueChanged" T="User" Label="Name" SearchFunc="@SearchName" ToStringFunc="@(e => e == null ? null : $"{e.Forename} {e.Surname}")" Class="mt-1" Variant="Variant.Outlined" Margin="Margin.Dense" AnchorOrigin="Origin.BottomCenter" Dense="true" ResetValueOnEmptyText="true" CoerceText="true" />
</MudItem>


<CascadingValue Value="UserFilter" Name="SelectedUser">
    <ChildComponent @ref="child"></ChildComponent>
</CascadingValue>



@code {
    #region Properties
    public static event Action OnFilterChanged = () => { };
    public User? UserFilter { get; set; }
    ChildComponent? child;

    public List<User> users = new List<User>()
    {
        new User(1, "Daffy", "Duck", "Duck", true),
        new User(2, "Donald", "Duck", "Duck", true),
        new User(3, "Micky", "Mouse", "Mouse", true),
        new User(4, "Minnie", "Mouse", "Mouse", true),
        new User(5, "Pluto", "Mouse", "Dog", true),
    };

    #endregion

    #region Methods
    private void OnNameValueChanged(User selectedUser)
    {
        UserFilter = selectedUser;
        StateHasChanged();
        OnFilterChanged.Invoke();
    }

    private async Task<IEnumerable<User>> SearchName(string value)
    {
        await Task.Delay(5);

        List<User> results = users.Where(u => u.Active).ToList();

        // 文本为空时不返回结果(下拉框不展开)
        if (!String.IsNullOrEmpty(value))
        {
            results = results.Where(result => result.Forename.Contains(value) || result.Surname.Contains(value)).OrderBy(d => d.Surname).ToList();
        }

        return results.ToList();
    }
    #endregion
}

子组件代码

<table style="width:100%">
    <tr>
        <th>Name</th>
        <th>Species</th>
    </tr>

    @foreach (var result in displayUsers)
    {
        <tr style="@($"color:{result.DisplayColour}")">
            <td>@result.Forename @result.Surname</td>
            <td>@result.Species </td>
        </tr>
    }
</table>


@code {
    #region Cascading Parameter
    [CascadingParameter(Name = "SelectedUser")]
    public User? UserFilter { get; set; }
    #endregion

    List<string> colorNames = new List<string> { "Red", "Green", "Blue", "Yellow", "Orange", "Purple" };

    public List<User> users = new List<User>()
    {
        new User(1, "Daffy", "Duck", "Duck", true),
        new User(2, "Donald", "Duck", "Duck", true),
        new User(3, "Micky", "Mouse", "Mouse", true),
        new User(4, "Minnie", "Mouse", "Mouse", true),
        new User(5, "Pluto", "Mouse", "Dog", true),
    };

    public List<User> displayUsers = new List<User>();

    #region Methods
    protected override void OnInitialized()
    {
        // 子组件订阅父组件的OnFilterChanged事件
        Parent.OnFilterChanged += () =>
        {
            AddColoursToTableResults();
            InvokeAsync(StateHasChanged);
        };
        AddColoursToTableResults();
    }


    private async Task AddColoursToTableResults()
    {
        var results = await GetUsersFromFilters();

        foreach (var user in results)
        {
            Random random = new Random();
            string randomColorName = colorNames[random.Next(colorNames.Count)];
            user.DisplayColour = randomColorName;
        }

        displayUsers = results.ToList();
    }

    public async Task<IEnumerable<User>> GetUsersFromFilters()
    {
        List<User> results = users.Where(x => x.Active).ToList();

        if (UserFilter != null)
        {
            results = results.Where(result => result.UserId.Equals(UserFilter.UserId)).ToList();
        }

        return results;
    }
    #endregion
}

User类代码

using System;
using System.Collections.Generic;

namespace BaseSetting.Pages
{
    public partial class User
    {
        public User(int id, string forename, string surname, string species, bool active)
        {
            UserId = id;
            Forename = forename;
            Surname = surname;
            Species = species;
            Active = active;
        }

        public int UserId { get; set; }

        public string Forename { get; set; } = null!;

        public string Surname { get; set; } = null!;

        public string Species { get; set; } = null!;

        public string DisplayColour { get; set; } = null!;

        public bool Active { get; set; } 


        public override bool Equals(object o)
        {
            var other = o as User;
            return other?.UserId == UserId;
        }

        public override int GetHashCode() => UserId.GetHashCode();

        public override string ToString()
        {
            return $"{Forename} {Surname}";
        }
    }
}

现象示例

  • 从MudAutocomplete中选择Micky Mouse时,表格显示所有用户;
  • 删除该筛选值后,表格才仅显示Micky Mouse的结果。

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 00:42:02