data-binding - Blazor 子组件渲染和参数更改

Question

我有一个接受 int 参数的组件 - 该组件使用该参数进行 API 调用以检索一些数据。此逻辑当前位于组件的 OnParametersSetAsync() 中。

这个组件还有一个复杂类型的参数。

当父组件使用此组件时，由于各种原因重新呈现自身，将调用此子组件上的 OnParametersSetAsync() - 即使其参数均未更改。我的理解是，这是因为复杂类型的参数(blazor 无法判断它是否发生了变化，所以它假设它发生了变化)。

这会导致不必要地重新触发 API 调用(实际的 int 参数没有改变)。

像这样进行数据检索是否不适合 OnParametersSetAsync()？如果是这样，我应该如何更改我的组件以使用 Blazor 框架？

父组件

调用 ChangeName() 会触发父级的重新渲染

<div>
    <EditForm Model="favoriteNumber">
        <InputSelect @bind-Value="favoriteNumber">
            <option value="0">zero</option>
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </InputSelect>
    </EditForm>
    
    @* This is the child-component in question *@
    <TestComponent FavoriteNumber="favoriteNumber" FavoriteBook="favoriteBook" />
    <br />

    <EditForm Model="person">
        First Name:
        <InputText @bind-Value="person.FirstName" />
        <br />
        Last Name:
        <InputText @bind-Value="person.LastName" />
    </EditForm>

    <button @onclick="ChangeName">Change Name</button>
</div>

@code {
    private int favoriteNumber = 0;
    private Book favoriteBook = new();
    private Person person = new() { FirstName = "Joe", LastName = "Smith" };

    private void ChangeName()
    {
        person.FirstName = person.FirstName == "Susan" ? "Joe" : "Susan";
        person.LastName = person.LastName == "Smith" ? "Williams" : "Smith";
    }
}

子组件

<div>@infoAboutFavoriteNumber</div>

@code {
    [Parameter]
    public int FavoriteNumber { get; set; }

    [Parameter]
    public Book FavoriteBook { get; set; }

    private string infoAboutFavoriteNumber = "";

    protected override async Task OnParametersSetAsync()
    {
        infoAboutFavoriteNumber = await ApiService.GetAsync<string>(id: FavoriteNumber.ToString());
    }
}

Answer 1

which the component uses to make an API call to retrieve some data.

您的子组件不应执行任何 API 调用。父组件应该管理父组件本身及其子组件的状态，下游 数据。如果事情变得复杂，那么您将不得不实现处理状态的服务。 @Peter Morris 肯定会建议您使用 Blazor State Management Using Fluxor .

不确定为什么要使用两个 EditForm 组件，而实际上您不应该使用一个组件。意识到组件非常昂贵，它们会使您的代码变慢。所以明智地使用它

回答你的问题:

在子组件中定义一个本地字段来保存 FavoriteNumber 参数属性的值，如下所示:

 @code 
  {
       [Parameter]
       public int FavoriteNumber { get; set; }
       private int FavoriteNumberLocal = -1;
  }

注意:FavoriteNumberLocal 变量存储从父组件传递的值。它允许您在本地存储并检查其值是否已更改，并据此决定是否调用 Web Api 端点(同样，您不应该这样做)

protected override async Task OnParametersSetAsync()
{
    if( FavoriteNumberLocal != FavoriteNumber)
    { 
         FavoriteNumberLocal = FavoriteNumber;

         infoAboutFavoriteNumber = await ApiService.GetAsync<string>(id: 
         FavoriteNumberLocal.ToString());
    }
}  

阅读此 question 的最后两条评论