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
相关产品推荐
相关产品推荐

