Blazor server StateHasChanged() does not refresh data

Question

I am struggling to get my Blazor components to rerender after updating some data. In my component I have a list of teams and each team has a list of team members. I can click on a delete button on each team to remove that member from the team. This works fine, except that the page does not refresh after deleting. I have tried setting StateHasChanged() normally. I have tried overriding ShouldRender() as shown below. I have tried using InvokeAsync(StateHasChanged), but nothing rerenders my page. The only thing I have found that refreshes the data is manually refreshing the team member list by calling the code in OnInitializedAsync() again. I have also tried doing this through a notifier service to update data across components, but it seems like StateHasChanged() does absolutely nothing. Any ideas?

@code {

    [Parameter]
    public Team? Team { get; set; }

    private List<Member?>? TeamMembers { get; set; }
    
    private bool _forceRerender;


    protected override async Task OnInitializedAsync()
    {
        var teamMembers = await _teamService.GetTeamMembers(Team);
        if (teamMembers != null) TeamMembers = teamMembers.ToList();
    }

    private async Task HandleRemoveTeamMember(BsonObjectId memberId, string timeStamp)
    {
        await _teamService.RemoveMember(Team.Id, memberId, timeStamp);

        _forceRerender = true;
        StateHasChanged();
    }
    
    protected override bool ShouldRender()
    {
        if (_forceRerender)
        {
            _forceRerender = false;
            return true;
        }
        return base.ShouldRender();
    }

score 2 · Accepted Answer · answered Jan 19 '22 at 10:57

2

You are not updating your TeamMembers object after removing it by calling the _teamService.RemoveMember() method.

Add some logic to remove the entry in your TeamMembers list and THEN call StateHasChanged().

Somthing like

TeamMembers.RemoveAll(x => x.MemberId == memberId);
StateHasChanged();

answered Jan 19 '22 at 10:57

klekmek

533
3
11

1

If `HandleRemoveTeamMember` is a UI event (button Click for example) there's no need for `StateHasChanged` or the `ShouldRender` stuff. `StateHasChanged` will get called by the underlying Blazor UI event handler once the `Task` supplied by `HandleRemoveTeamMember` has completed. You could also put the TeamMembers list in your service and then reference it from the UI component. I'll post another answer if you wish to show more detail. – MrC aka Shaun Curtis Jan 19 '22 at 11:58
@MrCakaShaunCurtis can you please check my post, I have a similar problem. [link](https://stackoverflow.com/questions/73193445/radzen-datagrid-possible-bug-when-adding-a-new-row) – Cenk Aug 01 '22 at 17:43

Blazor server StateHasChanged() does not refresh data

1 Answers1