Question

在Blazor中使用组件时，我经常需要子组件对参数更改值做出反应，并做出相应的操作。

在一个简单的示例中，我有一个在父组件和子组件之间链接的UserId参数。想法是，当父级更改UserId值时，子级中的属性设置器将调用一个读取所需数据的方法。这是一些代码来说明。

我的父母：

<ChildComponent UserId="@UserId" />

<a onclick="@ChangeUser">Load User</a>

@code
{
   public int UserId = 0;
   
   void ChangeUser()
   {
      UserId = 1;
   }
}

ChildComponent：

@if(userDetails != null)
{
   <div>First Name: @userDetails.FirstName</div>
   <div>Surname: @userDetails.Surname</div>
}


@code
{
   private int _userId;
   
   [Parameter] public int UserId
   {
      get => _userId;
      set
      {
         _userId = value;
         LoadUserDetails();
      }
   }
   UserDetails userDetails;
   
   async Task LoadUserDetails()
   {
      userDetails = [read from server here];
      StateHasChanged();
   }
}

现在，尽管这可行，但是我非常不喜欢ChildComponent中的属性设置器是同步的，但它正在调用异步代码（LoadUserDetails）。

在父级中更新UserId并使子级意识到这一点并在不阻塞任何线程的情况下调用异步方法的最干净方法是什么？

Answer 1

@code
{
   private int _userId;
   private bool _userIdChanged;
   
   [Parameter] public int UserId
   {
      get => _userId;
      set
      {
         _userIdChanged = value != _userId;
         _userId = value;
      }
   }
   UserDetails userDetails;
   
   async Task LoadUserDetails()
   {
      userDetails = [read from server here];
      StateHasChanged();
   }

    protected override async Task OnParametersSetAsync()
    {
         await base.OnParametersSetAsync().ConfigureAwait(false);
         if (_userIdChanged)
         {
             await LoadUserDetails().ConfigureAwait(false);
         }
    }
}

Blazor-订阅属性值更改

1 个答案: