카운터 예에서는 카운터를 증가시키는 타이머를 추가합니다.
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
protected override void OnInitialized()
{
var timer = new System.Timers.Timer();
timer.Interval = TimeSpan.FromSeconds(1).TotalMilliseconds;
timer.Elapsed += (s, e) =>
{
IncrementCount();
StateHasChanged();
};
timer.Start();
}
private void IncrementCount()
{
currentCount++;
}
}
이 코드는 Blazor WebAssembly에서 작동하며 카운터가 증가하고 UI에 새 값이 표시됩니다. 그러나 Blazor 서버를 사용하면 카운터가 증가하지만 (디버거에서 확인 됨) UI가 새로 고쳐지지 않습니다.
Blazor 서버로 UI를 수동으로 새로 고치는 방법은 무엇입니까?
사용 가능한 단일 JavaScript UI 스레드에서 실행되는 Blazor WebAssembly 앱과 달리 Blazor 서버 앱은 동일한 응용 프로그램에서 둘 이상의 스레드를 사용할 수 있으며 그 결과 동기화 컨텍스트에 문제가 발생합니다.
필요한 것은 동기화 컨텍스트를 조정하는 것입니다. 코드 측면에서 다음과 같이해야합니다.
InvokeAsync(() => StateHasChanged()); instead of merely calling `StateHasChanged();`
코드 디자인에 따라 종종이 예외가 발생합니다.
System.InvalidOperationException : '현재 스레드가 렌더러의 동기화 컨텍스트와 연결되어 있지 않습니다. Invoke () 또는 InvokeAsync ()를 사용하여 렌더링을 트리거하거나 렌더링 중에 액세스 된 상태를 수정할 때 렌더러의 동기화 컨텍스트로 실행을 전환합니다. '
도움이 되었기를 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다