在 Blazor 中使用 js.InvokeAsync 后视图未更新答案

【问题标题】：View not updating after using js.InvokeAsync in Blazor在 Blazor 中使用 js.InvokeAsync 后视图未更新
【发布时间】：2020-11-24 23:16:12
【问题描述】：

此代码似乎不会从 UI 中删除电影。模型确实发生了变化。只有当我明确调用StateHasChanged() 时，UI 才会发生变化。

代码：

@code{
    string name = "Guy";
    public bool display { get; set; } = false;
    [Parameter] public List<Movie> Movies { get; set; }

    private async void Delete(Movie movie)
    {
        bool confirm = await js.InvokeAsync<bool>("confirm", "Sure?");
        if (confirm == true)
        {

            Movies.Remove(movie);
            Console.WriteLine(Movies.Count);
            //StateHasChanged();
        }
    }

}

UI 就是这么简单：

@inject IJSRuntime js
<h1>Hello, world!</h1>

Welcome ,@StringsHelpers.toUpper(name) , to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<div>
    <h3>Movie</h3>
    <input type="checkbox" @bind="display" />
    <GenericList List="Movies">
        <ElementTemplate>
            <IndMovie IsDisplayed="display" Movie="context" Delete="Delete"></IndMovie>
        </ElementTemplate>
    </GenericList>

    <div>
        @foreach (var item in Movies)
        {
            @item.Title
        }
    </div>

    <br />
</div>

【问题讨论】：

标签： javascript c# asp.net .net blazor

【解决方案1】：

似乎私有 async void Delete(Movie movie) 应该返回 Task

【讨论】：

【解决方案2】：

试试这个：

  public async Task Delete(Movie movie)
    {
        bool confirm = await js.InvokeAsync<bool>("confirm", "Sure?");
        if (confirm == true)
        {

            Movies.Remove(movie);
            Console.WriteLine(Movies.Count);
            //StateHasChanged();
        }
    }

如果电影列表未更新父级中的状态，则可能是其他问题。

如果代码没有让你尝试将 Delete 方法放在父组件中并传递 this like 参数

【讨论】：