Question

我具有以下Blazor组件，正在测试API调用以获取天气数据。出于某种原因，需要单击两次提交按钮才能使该表显示更新后的对象的属性。

页面初始化后，我从浏览器中获得了正确的位置，并且天气数据显示在表中而没有问题。

FetchData.razor

@page "/fetchdata"
@using BlazingDemo.Client.Models
@using AspNetMonsters.Blazor.Geolocation

@inject HttpClient Http
@inject LocationService LocationService

<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>

<div>
    <EditForm Model="@weatherForm" OnValidSubmit="@GetWeatherDataAsync">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <InputText Id="cityName" bind-Value="@weatherForm.CityName" />
        <button type="submit">Submit</button>
    </EditForm>
</div>
<br />

@if (weatherData == null)
{
    <Loader/>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>City</th>
                <th>Conditions</th>
                <th>Temp. (C)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>@weatherData.Name</td>
                <td>@weatherData.Weather[0].Main</td>
                <td>@weatherData.Main.Temp</td>
            </tr>
        </tbody>
    </table>
}

@functions {

    WeatherFormModel weatherForm = new WeatherFormModel();
    WeatherData weatherData;
    Location location;

    protected override async Task OnInitAsync()
    {
        location = await LocationService.GetLocationAsync();

        if (location != null)
        {
            weatherData = await GetWeatherDataAsync(location.Latitude,location.Longitude);
        }
    }

    protected async Task<WeatherData> GetWeatherDataAsync(decimal latitude, decimal longitude)
    {
        return await Http.GetJsonAsync<WeatherData>($"https://api.openweathermap.org/data/2.5/weather?lat={location.Latitude}&lon={location.Longitude}&units=metric&appid=***removed***");
    }

    protected async void GetWeatherDataAsync()
    {
        weatherData = await Http.GetJsonAsync<WeatherData>($"https://api.openweathermap.org/data/2.5/weather?q={weatherForm.CityName}&units=metric&appid=***removed***");
    }
}

WeatherFormModel.cs

namespace BlazingDemo.Client.Models
{
    public class WeatherFormModel
    {
        [Required, Display(Name = "City Name")]
        public string CityName { get; set; }

        public bool IsCelcius { get; set; }
    }
}

我正在调用GetWEatherDataAsync()方法，通过检查Chrome的返回JSON数据，我可以看到每次调用从API返回的数据。它永远不会在第一次单击时更新表。我还尝试在调用方法之前将weatherData设置为null，但这也不起作用。

有什么建议吗？

Answer 1

单击“提交”按钮时，将调用GetWeatherDataAsync（）方法，该方法将数据检索到weatherData变量中并结束其任务...

通常，组件在事件触发后会重新渲染；也就是说，不需要手动调用StateHasChnaged（）方法来重新呈现组件。 Blazor会自动调用它。但是在这种情况下，您确实需要手动添加StateHasChnaged（）方法以重新呈现组件。因此，您的代码应如下所示：

protected async void GetWeatherDataAsync()
    {
        weatherData = await Http.GetJsonAsync<WeatherData>($"https://api.openweathermap.org/data/2.5/weather?q={weatherForm.CityName}&units=metric&appid=***removed***");

StateHasChnaged();
    }

“提交”事件是Blazor中唯一的事件，Blazor默认情况下会阻止其操作。 “提交”事件实际上并没有将表单发布到服务器。请参阅：https://github.com/aspnet/AspNetCore/blob/master/src/Components/Browser.JS/src/Rendering/BrowserRenderer.ts。因此在我看来……，只是猜测，Blazor对待它的方式有所不同，并且没有调用StateHasChanged方法来刷新组件。

Answer 2

此处需要进行StateHasChanged()调用的原因是因为您所引用的GetWeatherDataAsync()方法是void。因此，服务器无法知道调用何时完成。因此，原始表单提交请求的完成时间早于天气数据的填充时间。因此，对StateHasChanged()的调用将指示服务器需要重新呈现组件，并且可以正常工作。通常，您应该简单地避免使用async void（除非您知道这确实是fire-and-forget的情况），而是返回某种类型的Task，这将消除对显式{{1 }}。

Blazor表单提交需要单击两次以刷新视图

FetchData.razor

WeatherFormModel.cs

2 个答案: