Blazored LocalStorage State with MudBlazor initialization / rendering too late

huangapple go评论53阅读模式
英文:

Blazored LocalStorage State with MudBlazor initialization / rendering to late

问题

以下是您要翻译的内容:

"我有一个开关,其选择状态存储为一个状态。当加载视图时,应该从状态中取出上一个状态。这个功能正常。

然而,在渲染过程中,您可以看到状态的变化。实际上,只有在渲染完成后视图才应该可见,您看不到过渡。

Index.razor:

@page "/"
    
<MudToolBar>
    <MudSwitch T="bool" Checked="Show" CheckedChanged="HandleShowChanged" />
</MudToolBar>
    
@if (Show)
{
    <h1>显示一些内容</h1>
}
else
{
    <h1>没有要显示的内容</h1>
}

Index.razor.cs:

public partial class Index
{
    private bool Show { get; set; }
    
    protected override async Task OnInitializedAsync()
    {
        Show = await LocalStorage.GetItemAsync<bool>(nameof(Show));
    }
    
    private async Task HandleShowChanged(bool value)
    {
        Show = value;
        await LocalStorage.SetItemAsync(nameof(Show), value);
    }
}

编辑:

我检查了生命周期方法,感到困惑,因为OnAfterRenderAsync被调用两次,这让我理解为什么会看到过渡效果。此外,AfterRender在OnInitializedAsync结束之前完成。这种行为似乎是正确的,并在微软的文档中有描述。下面的解决方案也在那里命名并正确。

Start SetParametersAsync Show: False
Start OnInitializedAsync Show: False
Start OnAfterRenderAsync Show: False
End OnAfterRenderAsync Show: False
End OnInitializedAsync Show: True
Start OnParametersSetAsync Show: True
End OnParametersSetAsync Show: True
Start OnAfterRenderAsync Show: True
End OnAfterRenderAsync Show: True
End SetParametersAsync Show: True"

英文:

I have a switch that selection is stored as a state. The last state is to be taken out of the state when loading the view. That works.

However, you can see the change of state during rendering. Actually, the view should only be visible when the rendering is finished and you can't see the transition.

Index.razor:

@page &quot;/&quot;

&lt;MudToolBar&gt;
    &lt;MudSwitch T=&quot;bool&quot; Checked=&quot;Show&quot; CheckedChanged=&quot;HandleShowChanged&quot; /&gt;
&lt;/MudToolBar&gt;

@if (Show)
{
    &lt;h1&gt;Show something&lt;/h1&gt;
}
else
{
    &lt;h1&gt;Nothing to show&lt;/h1&gt;
}

Index.razor.cs:

public partial class Index
{
    private bool Show { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Show = await LocalStorage.GetItemAsync&lt;bool&gt;(nameof(Show));
    }

    private async Task HandleShowChanged(bool value)
    {
        Show = value;
        await LocalStorage.SetItemAsync(nameof(Show), value);
    }
}

Blazored LocalStorage State with MudBlazor initialization / rendering too late

EDIT:

I checked the lifecycle Methods and was confused because OnAfterRenderAsync is called twice which let me understand why I see the transition. Also AfterRender is finished before the end of OnInitializedAsync. This behaiour seems to be correct and is described in microsofts documentation. The solution below is also named there and correct.

Start SetParametersAsync Show: False
Start OnInitializedAsync Show: False
Start OnAfterRenderAsync Show: False
End OnAfterRenderAsync Show: False
End OnInitializedAsync Show: True
Start OnParametersSetAsync Show: True
End OnParametersSetAsync Show: True
Start OnAfterRenderAsync Show: True
End OnAfterRenderAsync Show: True
End SetParametersAsync Show: True

答案1

得分: 1

你的问题是渲染发生得太早,这是无法阻止的。但你可以在加载完成前消除相关部分:

@page "/";

@if (isLoaded)
{
  <MudToolBar>
    <MudSwitch T="bool" Checked="Show" CheckedChanged="HandleShowChanged" />
  </MudToolBar>

  @if (Show)
  {
    <h1>显示一些内容</h1>
  }
  else
  {
    <h1>没有内容可显示</h1>
  }
}

我假设你可以处理 isLoaded 的实现。

英文:

Your problem is that the rendering happens too soon, and that you can't prevent. But you can eliminate the relevant parts until loading is finished:

@page &quot;/&quot;

@if (isLoaded)
{
  &lt;MudToolBar&gt;
    &lt;MudSwitch T=&quot;bool&quot; Checked=&quot;Show&quot; CheckedChanged=&quot;HandleShowChanged&quot; /&gt;
  &lt;/MudToolBar&gt;

  @if (Show)
  {
      &lt;h1&gt;Show something&lt;/h1&gt;
  }
  else
  {
     &lt;h1&gt;Nothing to show&lt;/h1&gt;
  }
}

I assume you can handle the isLoaded implementation.

huangapple
  • 本文由 发表于 2023年5月30日 04:01:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/76360044.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定