Childcomponent 到另一个 ChildComponent 的 EventCallback，：Blazor答案

【问题标题】：EventCallback of Childcomponent to an other ChildComponent, : BlazorChildcomponent 到另一个 ChildComponent 的 EventCallback，：Blazor
【发布时间】：2021-10-09 14:36:14
【问题描述】：

编辑::工作解决方案

我正在尝试解决上传文件时的问题（（在）/通过）FileUpload 组件，获得子 DownloadTable 组件的 FileDownload 组件不会更新，它仅在我强制刷新时才有效，因为它会重新加载我想要避免的 web 应用程序。

Index.razor



    @page "/"


    <h1>Drag/drop file viewer</h1>

    <p>Shows how you can present a custom UI instead of the native file input.</p>

    <FileUpload RefreshPageDownload="RefreshPageDownload"/>

    <FileDownload State="State" />

    @code {
        [Inject]
         public NavigationManager NavigationManager { get; set; }

        public bool State { get; set; }
        public async Task RefreshPageDownload(int input)
        {
            await Task.CompletedTask;
            State = !State;
        }
    }

文件上传.razor




<div id="drag-drop-zone">
    <InputFile OnChange="UploadFile" multiple />
    @status
</div>

@code {
    const string DefaultStatus = "Drop a text file here to view it, or click to choose a file";
    const int MaxAllowedFiles = 5;
    string status = DefaultStatus;

    List<Upload> uploadList = new();

    [Inject]
    IUploadService _uploadService { get; set; }

    [Parameter]
    public EventCallback<int> RefreshPageDownload { get; set; }


    async Task UploadFile(InputFileChangeEventArgs e)
    {
        uploadList.Clear();
        foreach (var input in e.GetMultipleFiles(MaxAllowedFiles))
        {

            var buffers = new byte[input.Size];
            await input.OpenReadStream().ReadAsync(buffers);
        
            var u = new Upload {
                Content =  buffers,
                MimeType = input.ContentType,
                Name = input.Name,
                Date = input.LastModified.DateTime,
                Size = input.Size
            };

            uploadList.Add(u);
        }

        await _uploadService.UploadFile(uploadList);

        await RefreshParent();
    }

    public async Task RefreshParent()
    {
        await RefreshPageDownload.InvokeAsync(1);
    }
}

文件下载




<div class="row">
    <div class="col-md-10">
        <!-- <Search OnSearchChanged="SearchChanged" /> -->
    </div>
</div>
<div class="row">
    <DownLoadTable Downloads="downloadList" />
</div>
<div class="row">
    <div class="col">
        <Pagination MetaData="MetaData" Spread="2" SelectedPage="SelectedPage" />
    </div>
</div>

@code {
public partial class FileDownload
    {
        [Parameter]
        public bool State { get; set; }

        public MetaData MetaData { get; set; } = new();

        private ProductParameters _productParameters = new ProductParameters();

        private IEnumerable<Download> downloadList { get; set; }

        [Inject]
        IDownloadService _downloadService { get; set; }

        private async Task SelectedPage(int page)
        {
            _productParameters.PageNumber = page;
            await GetProducts();
        }

        private async Task GetProducts()
        {
            var pagingResponse = await _downloadService.GetAll(_productParameters);
            downloadList = pagingResponse.Items;
            MetaData = pagingResponse.MetaData;
        }

        public async Task Save()
        {
            StateHasChanged();
            Console.WriteLine("NEVER CALLED");
        }

        protected async override Task OnParametersSetAsync()
        {
           await  GetProducts();
        }
    }

}

任何想法，上传后我可以做什么，所以它用它的子组件刷新 FileDownload 组件。

最好的亚历克斯

【问题讨论】：

您的代码不完整，可能是因为它不是真正的代码，因此很难给出具体答案，但您会看到 <FileDownload State="State" /> 的位置 - 在调用 StateHasChanged() 之前切换该 State 变量在RefreshPageDownload。原因：Blazor 将跟踪 State，如果它没有更改，则无需渲染组件。更改值，它将呈现。
是的，Edit State="State" 的代码，我正在尝试一些东西，当 RefreshPageDownload 功能被触发时（当上传发生时），我用 StateHasChanged() 尝试过，但什么也没发生。
您需要更改 FileDownload 组件的参数 - 否则 Blazor 将优化而不重新渲染。切换状态布尔值会做
是的，它现在可以工作了，非常好！
添加为答案，以便可以将问题标记为已回答。

标签： blazor webassembly

【解决方案1】：

在渲染周期中，Blazor 将检查已知类型（bool 为一）的值是否发生变化。

如果所有参数已知未更改，则组件将不提交重新渲染。

添加一个简单的参数，如bool，并在您想要启用渲染时切换其值是一种简单的使用方法。

在这种情况下，如果您在 RefreshPageDownload 中切换“状态”变量，则 Blazor 将在处理当前渲染周期时包含该组件。

【讨论】：