Übergeordnete Komponente wird in Blazor Webassembly nicht aktualisiert

Question

Ich bin ziemlich neu in Blazor, daher ist dieses Problem möglicherweise eher ein logisches Problem als ein tatsächliches Codierungsproblem. Grundsätzlich rendert meine übergeordnete Komponente eine Liste basierend auf einer Liste einer untergeordneten Komponente. Das Problem ist, dass die Liste nicht aktualisiert wird.

Der Einfachheit halber habe ich eine kleine Demo des Problems erstellt. Hier ist meine Hauptkomponente:

@page "/"

<Counter @ref="MyCounter" />

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

@code {
    Counter MyCounter;
}

Hier ist meine Zählerkomponente:

<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");        
    }
}

Ich erwarte, dass jedes Mal, wenn ich auf die Schaltfläche klicke, die neu hinzugefügte Zeichenfolge im <ul>Tag angezeigt wird. Was jedoch tatsächlich passiert, ist, dass nichts gerendert wird. Das Konsolenprotokoll zeigt die neue Zeichenfolge sowie die Anzahl der Elemente in der Liste an, und das ist alles korrekt. Blazor wird einfach nicht neu gerendert, wahrscheinlich weil ich es irgendwie benachrichtigen muss, dass es neu gerendert werden muss. Wie kann ich mein erwartetes Verhalten zum Laufen bringen?

Ich habe eine Geige des Problems hier .

Answer 1

Ich sehe, dass Sie die Liste der Elemente in der untergeordneten Komponente speichern. In diesem Fall müssen Sie die übergeordnete Komponente anweisen, sich selbst neu zu rendern, da ich neue Daten anzeigen muss. Sie können dies tun, indem Sie der untergeordneten Komponente einen Ereignisrückruf hinzufügen und sich mit dem Ereignis im übergeordneten Element verbinden, in dem Sie die StateHasChanged()Methode aufrufen . Code siehe modifizierter Geiger

Eine andere Möglichkeit könnte darin bestehen, die Liste in die übergeordnete Komponente zu verschieben und die Liste als Parameter an die untergeordnete Komponente zu übergeben. In diesem Fall würden Sie die Veranstaltung nicht benötigen.

Answer 2

@icemanind, ich habe mir das angeschaut https://blazorfiddle.com/s/brcf1nvi. Sie können dies zum Laufen bringen, indem Sie eine bidirektionale Bindung einrichten .

Die wichtigsten Änderungen sind:

• Änderung im übergeordneten index.razor

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

• zum untergeordneten counter.razor hinzufügen

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

Bitte werfen Sie einen Blick auf https://blazorfiddle.com/s/l5ucab8d.