简体   繁体   English

甚至调用 Action 时,StateHasChanged 都不会呈现组件

[英]StateHasChanged is not Rendering the component when even Action is invoked

I'm trying to trigger StateHasChanged when the button is clicked.单击按钮时,我试图触发 StateHasChanged。 This is done by adding StateHasChanged to event Action .这是通过将StateHasChanged添加到event Action来完成的。 When debugging I can see that the Invoke method of the event is being fired but the UI is not re-rendering.调试时,我可以看到事件的Invoke方法正在被触发,但 UI 没有重新渲染。

This is the flow I want it work like:这是我希望它像这样工作的流程:

  1. The button is clicked in OgToolbar.razor.csOgToolbar.razor.cs中单击该按钮
  2. The event is triggered事件被触发
  3. StorageManagerService changes the state in the local storage and invokes the event StorageManagerService更改本地存储中的 state 并调用事件
  4. The UI is re-rendering in OgSidebar.razor.cs UI 在OgSidebar.razor.cs中重新渲染

OgSidebar.razor.cs where the UI must re-render OgSidebar.razor.cs,其中 UI 必须重新渲染

protected override void OnInitialized()
{
     StorageManagerService.OnChange += StateHasChanged;
}

protected override async Task OnInitializedAsync()
{
    var containsKey = await StorageManagerService.ContainsKeyAsync("isSidebarToggled");

    if (containsKey == false)
        await StorageManagerService.SetItemAsync("isSidebarToggled", true);

    _isSidebarToggled = await StorageManagerService.GetItemByKeyAsync<bool> 
                        ("isSidebarToggled");
}

public void Dispose()
{
    StorageManagerService.OnChange -= StateHasChanged;
}

OgToolbar.razor.cs where the button is clicked and triggers the event OgToolbar.razor.cs 其中按钮被点击并触发事件

[Inject]
private IStorageManagerService StorageManagerService { get; set; }

private bool _isSidebarToggled = false;

protected override void OnInitialized()
{
    StorageManagerService.OnChange += StateHasChanged;
}

protected override async Task OnInitializedAsync()
{
    var containsKey = await StorageManagerService.ContainsKeyAsync("isSidebarToggled");

    if (containsKey == false)
        await StorageManagerService.SetItemAsync("isSidebarToggled", true);

    _isSidebarToggled = await StorageManagerService.GetItemByKeyAsync<bool>("isSidebarToggled");
}

public void Dispose()
{
    StorageManagerService.OnChange -= StateHasChanged;
}

StorageManagerService.cs where the state is managed in local storage using Blazored: StorageManagerService.cs,其中 state 使用 Blazored 在本地存储中进行管理:

private readonly ILocalStorageService _localStorageService;

public event Action OnChange;

public async Task<T> GetItemByKeyAsync<T>(string identifier)
{
    var itemFromLocalStorage = await _localStorageService.GetItemAsync<T>(identifier);

    return itemFromLocalStorage;
}

public async Task<bool> ContainsKeyAsync(string identifier)
{
    return await _localStorageService.ContainKeyAsync(identifier);
}

public async Task SetItemAsync<T>(string identifier,T item)
{
    await _localStorageService.SetItemAsync(identifier, item);

    OnChange.Invoke();
}

You trigger the event but the state of _isSidebarToggled is not refreshed.您触发了事件,但 _isSidebarToggled 的 state 未刷新。

Roughly:大致:

//OgSidebar.razor.cs

protected override void OnInitialized()
{
     StorageManagerService.OnChange += async () => 
       { 
         _isSidebarToggled = await StorageManagerService
            .GetItemByKeyAsync<bool> ("isSidebarToggled");
          StateHasChanged ();
       };
}

Using async void for the eventhandler is a little iffy.对事件处理程序使用async void有点不确定。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM