Page1.razor (домашняя страница) и Page2.razor. Проблем с отображением первой страницы нет. Но когда я перехожу на вторую страницу, возникает проблема с мерцанием. Я поставил сон на 1000 мс, чтобы лучше видеть мерцание. На какой бы странице эта проблема не существовала.
- Откройте приложение
- Page1 отображается без проблем.
- Перейти на страницу 2., проблема с мерцанием.
- Открыть страницу браузера в режиме инкогнито.
- Вставить ссылку на страницу 2.
- Проблем с отрисовкой страницы 2 нет.
- Перейти к Страница 1, проблема с мерцанием
Репозиторий 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
}
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
}
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($"
}
}
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
Мобильная версия