StateHasChanged () не перезагружает страницу - PullRequest
Новая
       24

StateHasChanged () не перезагружает страницу

0 голосов
/ 23 января 2020

Проблема:

Как указано в заголовке, StateHasChanged не выполняет повторную визуализацию страницы

Цель:

Я хочу обновить sh страницу при нажатии кнопки

Текущий код 

<button @onclick="CreatePlayer">Create User</button>


@functions {
string username;

[CascadingParameter]
Task<AuthenticationState> authenticationStateTask { get; set; }

async Task CreatePlayer()
{
    var authState = await authenticationStateTask;
    var user = authState.User;
    var player = await PlayerData.GetByEmail(user.Identity.Name);

    if (player == null)
    {
        player = new Player()
        {
            Email = user.Identity.Name,
            UserName = username
        };

        await PlayerData.Create(player);
    }

    await Task.Delay(50);
    StateHasChanged();

}
}

Ответы [ 2 ]

1 голос
/ 23 января 2020

С одной стороны, вы сообщаете компилятору, что она должна создать обработчик событий для события click с именем CreatePlayer: @onclick="CreatePlayer. Эта директива компилятора атрибутов создает закулисный обработчик для вас EventCallback<Task>, следствием чего является то, что вам вообще не нужно использовать StateHasChanged в вашем коде, поскольку этот метод (StateHasChanged) автоматически вызывается после того, как события пользовательского интерфейса принимают place.

С другой стороны, вы сообщаете компилятору, что тип кнопки должен быть установлен на «submit». Это неправильно, конечно ... Вы не можете иметь это и то и другое. Если для атрибута type задано значение «submit», обычно отправляют данные формы на сервер, но в Blazor такая функция запрещена с помощью кода в разделе JavaScript Blazor. Вы хотите отправить данные формы на сервер? Всегда помните, что Blazor это SPA-приложение. Не отправлять?

Ваш код должен быть: 

<button @onclick="CreatePlayer" >Create User</button>

Просто для записей, обычно вы должны внедрить объект AuthenticationStateProvider в ваши компоненты, например: 

@inject AuthenticationStateProvider AuthenticationStateProvider

, а затем получить объект AuthenticationState. Вот как ваш код может быть переписан: 

var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        var user = authState.User;
1 голос
/ 23 января 2020

Просто для записи, я добавляю свой комментарий в ответ:

StateHasChanged просто сообщаю компоненту, что что-то изменяется в его состоянии, которое не перерисовывает его. Компонент сам выбирает, должен ли он перерисовываться или нет. Вы можете переопределить ShouldRender, чтобы заставить компонент перерисовываться при изменении состояния. 

@code {
    bool _forceRerender;

    async Task CreatePlayer()
    {
        var authState = await authenticationStateTask;
        var user = authState.User;
        var player = await PlayerData.GetByEmail(user.Identity.Name);

        if (player == null)
        {
            player = new Player()
            {
                Email = user.Identity.Name,
                UserName = username
            };

            await PlayerData.Create(player);
        }

        _forceRerender = true;
        StateHasChanged();

    }

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