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只是不重新渲染，可能是因为我不得不以某种方式通知它需要重新渲染。如何使我的预期行为起作用？

我制造了一个问题here的小提琴。

Answer 1

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

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

Answer 2

@icemanind，我看了https://blazorfiddle.com/s/brcf1nvi。您可以通过设置two way binding来使其正常工作。

主要更改是：

父级 index.razor

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

添加到子 counter.razor

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

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

Blazor Webassembly中的父组件未更新

2 个答案: