我在方法@using BlazingShop.Services
@using BlazingShop.Data
@using BlazorInputFile
@using System.IO
@inject IProductService ProductService
<BSModal @ref="@ProductDetailsModal" IsCentered="true">
<BSModalHeader OnClick="@OnToggle">@ProductDetailModalTitle</BSModalHeader>
<EditForm Model="Product" OnValidSubmit="HandleValidSubmit">
<BSModalBody style="min-height: 150px;">
<BSFormGroup Class="row">
<div class="d-flex">
<label For="ProductName" class="col-4 m-0 align-self-center">Name:</label>
<div class="col-7">
<BSInput Id="ProductName" InputType="InputType.Text" @bind-Value="Product.Name"></BSInput>
<ValidationMessage For="@(() => Product.Name)"></ValidationMessage>
</div>
</div>
<div class="d-flex">
<label For="ProductCategory" class="col-4 m-0 align-self-center">Category:</label>
<div class="col-7">
<BSInput Id="ProductCategory" InputType="InputType.Text" @bind-Value="Product.Category.Name"></BSInput>
<ValidationMessage For="@(() => Product.Category.Name)"></ValidationMessage>
</div>
</div>
<div class="d-flex">
<label For="ProductPrice" class="col-4 m-0 align-self-center">Price:</label>
<div class="col-7">
<BSInput Id="ProductPrice" InputType="InputType.Text" @bind-Value="Product.Price"></BSInput>
<ValidationMessage For="@(() => Product.Price)"></ValidationMessage>
</div>
</div>
<div class="d-flex">
<label For="ProductShadeColor" class="col-4 m-0 align-self-center">Shade Color:</label>
<div class="col-7">
<BSInput Id="ProductShadeColor" InputType="InputType.Text" @bind-Value="Product.ShadeColor"></BSInput>
<ValidationMessage For="@(() => Product.ShadeColor)"></ValidationMessage>
</div>
</div>
<div class="d-flex">
<label For="ProductImage" class="col-4 m-0 align-self-center">Upload Image:</label>
<div class="col-7">
<BSBasicInput InputType="InputType.File" Id="ProductImage" Value="string.Empty" OnChange=""></BSBasicInput>
<ValidationMessage For="@(() => Product.Image)"></ValidationMessage>
</div>
</div>
</BSFormGroup>
</BSModalBody>
<BSModalFooter>
<DataAnnotationsValidator />
<BSButton Color="Color.Primary" ButtonType="ButtonType.Submit">Save Changes</BSButton>
<BSButton Color="Color.Secondary" @onclick="@OnToggle">Close</BSButton>
</BSModalFooter>
</EditForm>
</BSModal>
@code {
BSModal ProductDetailsModal;
[Parameter]
public Product Product { get; set; }
[Parameter]
public string ProductDetailModalTitle { get; set; }
[Parameter]
public EventCallback<bool> OnSave { get; set; }
public byte[] ImageUploaded { get; set; }
void OnToggle(MouseEventArgs e)
{
Toggle();
}
public void Toggle()
{
ProductDetailsModal.Toggle();
}
private async void HandleValidSubmit()
{
Toggle();
if (Product.Id == 0)
{
await ProductService.AddProductAsync(Product);
}
else
{
await ProductService.EditProductAsync(Product);
}
await OnSave.InvokeAsync(true);
}
async Task HandleSelection(IFileListEntry[] files)
{
var file = files.FirstOrDefault();
if (file != null)
{
var ms = new MemoryStream();
await file.Data.CopyToAsync(ms);
ImageUploaded = ms.ToArray();
}
}
string ConvertImageToDisplay(byte[] image)
{
if (image != null)
{
var base64 = Convert.ToBase64String(image);
var finalStr = $"data:image/jpg;base64,{base64}";
return finalStr;
}
else
{
return string.Empty;
}
}
}
中有一个函数api，它向服务器发出请求：
onSubmit函数onSubmit: async (formValues) => {
setSubmitting(true);
try {
const res = await api('api/auth/register', {
method:'POST',
body: JSON.stringify(formValues)
});
if(Array.isArray(res)){
setErrorMessage(res[0].message);
} else {
const token = res.token.token;
localStorage.setItem('myToken', token);
history.push("/home");
}
} catch(e) {
console.error(e);
} finally {
setSubmitting(false);
}
},
});
在一个单独的文件中，如下所示：
api创建此功能只是为了方便。但是现在我不需要此功能。我需要export const api = async (url, args) => {
const response = await fetch(`${apiUrl}${url}`, {
...args,
headers: {
"Content-type": "application/json; charset=UTF-8 ",
"Accept": 'application/json',
...args.headers,
},
});
return response.json();
}
中的代码在方法api中。也就是说，功能onSubmit根本不存在。
我做到了：
api但是我有错误：
TypeError：无法读取未定义的属性“令牌”
答案 0 :(得分：0)
尝试将await的{{1}}用于resf.json()，因为调用.json()可以为尚未加载的http响应的正文提供另一个保证。
const res = await resf.json();