时间戳

首页 > 解决方案 > Blazor Webassembly 中的父组件未更新

blazor - Blazor Webassembly 中的父组件未更新

问题描述

我对 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 只是不重新渲染，可能是因为我必须以某种方式通知它它需要重新渲染。我怎样才能让我的预期行为起作用？

我在这里创造了一个问题。

标签： blazorblazor-client-sideblazor-webassembly

解决方案

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

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

推荐阅读