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只是没有重新渲染，可能是因为我必须以某种方式通知它需要重新渲染。我如何才能让我的预期行为发挥作用？

我在这里制造了一个难题。

Answer 1

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

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

Answer 2

@icemanind，我看了一眼https://blazorfiddle.com/s/brcf1nvi.您可以通过设置双向绑定来实现这一点。

关键的变化是：

• 父级index.razor的更改

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

• 添加到childcounter.razor

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

请看一下https://blazorfiddle.com/s/l5ucab8d.