Проблема мерцания в режиме автоматического рендеринга Blazor, хотя страницы используют постоянствоC#

Место общения программистов C#
Ответить
Anonymous
 Проблема мерцания в режиме автоматического рендеринга Blazor, хотя страницы используют постоянство

Сообщение Anonymous »

В моем приложении есть две страницы:
Page1.razor (домашняя страница) и Page2.razor. Проблем с отображением первой страницы нет. Но когда я перехожу на вторую страницу, возникает проблема с мерцанием. Я поставил сон на 1000 мс, чтобы лучше видеть мерцание. На какой бы странице эта проблема не существовала.
  • Откройте приложение
  • Page1 отображается без проблем.
  • Перейти на страницу 2., проблема с мерцанием.
  • Открыть страницу браузера в режиме инкогнито.
  • Вставить ссылку на страницу 2.
  • Проблем с отрисовкой страницы 2 нет.
  • Перейти к Страница 1, проблема с мерцанием
Хотя использование глобального режима InteractiveAutoRender (в App.razor) устраняет проблему, мое приложение не использует глобальный режим рендеринга. Я не хочу этого. Вероятно, я что-то упускаю из жизненного цикла компонента. Не могу понять что. Кто-нибудь может помочь? Спасибо, что уделили время.
Репозиторий GitHub с ошибкой:
https://github.com/kemgn/PersistenceBug
App.razor:

.
.










Page1.razor:
@page "/"
@inject HttpClient Http
@using System.Text.Json.Serialization
@using System.Collections.ObjectModel
@using static PersistanceBug.Client.Pages.Page1
@rendermode @(new InteractiveAutoRenderMode(true))
@inherits PersistentDataComponentBase

Page 1 (Home)

Calling mock API from: https://jsonplaceholder.typicode.com/posts

Go to Page 2
  • @foreach (var post in posts)
    {
  • @post.Title
    }
@code {

private Post[] posts = Array.Empty
();

protected override string DataKey => "page1persist";

protected override async Task LoadDataAsync()
{
Post[]? result = await Http.GetFromJsonAsync("https://jsonplaceholder.typicode.com/posts").ConfigureAwait(true);

return result ?? [];
}
protected override void OnDataLoaded(Post[]? data)
{
if (data is null)
return;

posts = data;
}
protected override Post[]? PrepareDataForPersistence(Post[]? data)
{
return posts?.ToArray();
}

}

Page2.razor:
@page "/page2"
@inject HttpClient Http
@using System.Text.Json.Serialization
@using System.Collections.ObjectModel
@using static PersistanceBug.Client.Pages.Page2
@rendermode @(new InteractiveAutoRenderMode(true))
@inherits PersistentDataComponentBase

Page 2

Calling mock API from: https://jsonplaceholder.typicode.com/comments

Go to Page 1
  • @foreach (var comment in comments)
    {
  • @comment.Name
    }
@code {
private Comment[] comments = Array.Empty();

protected override string DataKey => "page2persist";

protected override async Task LoadDataAsync()
{
Comment[]? result = await Http.GetFromJsonAsync("https://jsonplaceholder.typicode.com/Comments").ConfigureAwait(true);

return result ?? [];
}
protected override void OnDataLoaded(Comment[]? data)
{
if (data is null)
return;

comments = data;
}
protected override Comment[]? PrepareDataForPersistence(Comment[]? data)
{
return comments?.ToArray();
}
}

Persistence.cs
using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;

namespace PersistanceBug.Client.Pages
{
public abstract class PersistentDataComponentBase : Microsoft.AspNetCore.Components.ComponentBase, IDisposable
{
[Inject] protected PersistentComponentState ApplicationState { get; set; } = default!;

private PersistingComponentStateSubscription persistingSubscription;
protected T? Data { get; set; }
private bool disposed;

protected abstract string DataKey { get; }

protected abstract Task LoadDataAsync();
protected abstract void OnDataLoaded(T? data);
protected abstract T? PrepareDataForPersistence(T? data);

protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync().ConfigureAwait(true);

Thread.Sleep(1000);

persistingSubscription = ApplicationState.RegisterOnPersisting(persistDataAsync);

bool restored = ApplicationState.TryTakeFromJson(DataKey, out T? restoredData);

if (!restored)
{
T? apiData = await LoadDataAsync().ConfigureAwait(false);
OnDataLoaded(apiData);

if (!Equals(Data, default(T)))
{
Console.WriteLine($"✅ {DataKey} verisi yüklendi");
}
}
else
{
OnDataLoaded(restoredData);
}
}

private Task persistDataAsync()
{
T? dataToStore = PrepareDataForPersistence(Data);
ApplicationState.PersistAsJson(DataKey, dataToStore);
return Task.CompletedTask;
}

public void Dispose()
{
Dispose(disposing: true);
GC.SuppressFinalize(this);
}

protected virtual void Dispose(bool disposing)
{
if (!disposed)
{
if (disposing)
{
persistingSubscription.Dispose();
}

disposed = true;
}
}
~PersistentDataComponentBase()
{
Dispose(disposing: false);
}
}
}



Подробнее здесь: https://stackoverflow.com/questions/798 ... e-persiste
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «C#»