父组件未在 Blazor Webassembly 中更新

Question

我对 Blazor 还很陌生，所以这个问题可能更像是一个逻辑问题，而不是一个实际的编码问题。基本上，我的父组件正在根据子组件列表呈现一个列表。问题是列表没有更新。

为了简单起见，我创建了一个问题的小演示。这是我的主要组成部分：

@page "/"

<Counter @ref="MyCounter" />

<ul>
    @if (MyCounter?.TheList != null) 
    {
        @foreach (string s in MyCounter.TheList)
        {
            <li>@s</li>
        }
    }
</ul>

@code {
    Counter MyCounter;
}

这是我的计数器组件：

<div>
    <button @onclick="AddToList">Add to list</button>
</div>

@code {
    public List<string> TheList {get;set;} = new List<string>();
    private Random Rnd = new Random();

    private void AddToList()
    {
        int length = 5;
    
        var str_build = new System.Text.StringBuilder();        

        char letter;  
        for (int i = 0; i < length; i++)
        {
        double flt = Rnd.NextDouble();
        int shift = Convert.ToInt32(Math.Floor(25 * flt));
        letter = Convert.ToChar(shift + 65);
        str_build.Append(letter);  
        }

        TheList.Add(str_build.ToString());
        Console.WriteLine($"Added to the list: {str_build.ToString()}");
        Console.WriteLine($"The list now has {TheList.Count} items");        
    }
}

我希望看到的行为是每次单击按钮时，我应该看到新添加的字符串在 <ul> 标记中弹出。然而，实际发生的是什么都没有被渲染。控制台日志显示新字符串加上列表中的项目数，这些都是准确的。 Blazor 只是没有重新渲染，可能是因为我必须以某种方式通知它它需要重新渲染。我怎样才能使我的预期行为起作用？

我创建了一个fiddle的问题here。

Answer 1

我看到您正在将项目列表存储在子组件中。在这种情况下，您必须告诉父组件重新渲染您自己，因为我有新数据要显示。您可以通过向子组件添加事件回调并连接到您调用 StateHasChanged() 方法的父组件中的事件来实现。有关代码，请参阅 modified fiddler

其他选项可以是将列表移动到父组件并将列表作为参数传递给子组件。在那种情况下，您将不需要该事件。

Answer 2

@icemanind，我看了一下https://blazorfiddle.com/s/brcf1nvi. You can get this to work by setting up two way binding。

主要变化是：

parent的变化index.razor

<Counter @ref="MyCounter" @bind-TheList="TheList" />

添加到 child counter.razor

public EventCallback<List<string>> TheListChanged {get;set;}

请看https://blazorfiddle.com/s/l5ucab8d。

父组件未在 Blazor Webassembly 中更新

Parent component not updating in Blazor Webassembly

blazor

blazor-client-side

blazor-webassembly