Невозможно удалить видеокомпонент из дерева рендеринга даже после уничтожения родительского компонента

Question

Я пытаюсь создать видеокомпонент с помощью Blazor. Я использую библиотеку video.js для функций, связанных с видео. Код находится в репо https://github.com/VenkateshSrini/BlazorComponents. Теперь, когда я запускаю код в первый раз, появляется страница счетчика. У него есть кнопка под названием player, при нажатии на которую запускается videplayer.razor. На этой странице есть тег видео. Он отображает видео, и у меня также есть таймер на странице, который периодически обновляет оставшееся время и продолжительность в localStorage браузера. Это достигается с помощью моста Javascript. Затем, когда я снова нажимаю на страницу счетчика, он плавно переходит без ошибок. Теперь, когда я повторяю ту же операцию в следующий раз, я получаю странную ошибку. Я не могу продолжить, я не понимаю, что происходит. Ошибка, как показано ниже

blazor.webassembly.js: 1 критическое значение: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Компонент визуализации необработанного исключения: невозможно прочитать свойство removeChild с нулевым значением TypeError: невозможно прочитать свойство removeChild с нулевым значением в e (http://localhost:5000/_framework/blazor.webassembly.js:1:6918) в Object.e [как removeLogicalChild] (http://localhost:5000/_framework/blazor.webassembly.js:1:6890) в e.applyEdits (http://localhost:5000/_framework/blazor.webassembly.js:1:13649) в e.updateComponent (http://localhost:5000/_framework/blazor.webassembly.js:1:12880) в Object.t.renderBatch (http://localhost:5000/_framework/blazor.webassembly.js:1:1704) в Object.window.Blazor._internal.renderBatch (http://localhost:5000/_framework/blazor.webassembly.js:1:34784) в _mono_wasm_invoke_js_unmarshalled (http://localhost:5000/_framework/wasm/dotnet.3.2.0.js:1:172099) в wasm_invoke_iiiiii (http://localhost:5000/_framework/wasm/dotnet.wasm:wasm-function[3160]:0x9b33d) в icall_trampoline_dispatch (http://localhost:5000/_framework/wasm/dotnet.wasm:wasm-function[5777]:0xfe711) в mono_wasm_interp_to_native_trampoline (http://localhost:5000/_framework/wasm/dotnet.wasm:wasm-function[4607]:0xca81d) Microsoft.JSInterop.JSException: невозможно прочитать свойство removeChild с нулевым значением TypeError: невозможно прочитать свойство removeChild с нулевым значением в e (http://localhost:5000/_framework/blazor.webassembly.js:1:6918) в Object.e [как removeLogicalChild] (http://localhost:5000/_framework/blazor.webassembly.js:1:6890) в e.applyEdits (http://localhost:5000/_framework/blazor.webassembly.js:1:13649) в e.updateComponent (http: // localhost: 5000 / _framework / blazor.webassembly.js:1:12880) в Object.t.renderBatch (http://localhost:5000/_framework/blazor.webassembly.js:1:1704) в Object.window.Blazor._internal.renderBatch (http: // localhost: 5000 / _framework / blazor.webassembly.js: 1: 34784) в _mono_wasm_invoke_js_unmarshalled (http: // localhost: 5000 / _framework / wasm / dotnet.3.2.0.js: 1: 172099) в wasm_invoke_iiiiii (http://localhost:5000/_framework/wasm/dotnet.wasm:wasm-function[3160]:0x9b33d) в icall_trampoline_dispatch (http://localhost:5000/_framework/wasm/dotnet.wasm:wasm-function[5777]:0xfe711) в mono_wasm_interp_to_native_ localhost: 5000 / _framework / wasm / dotnet.wasm: wasm-function[4607]:0xca81d) в Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TResult] (идентификатор System.String0, T1 arg arg1, T2 arg2) <0x2cd31a0 + 0x00046> в: 0 в Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TResult] (идентификатор System.String, T0 arg0, T1 arg1) <0x2cd30c0 + 0x00014> в: 0 в Microsoft.AspNetCore.Components.WebAssemblyDevice.Rendering.WebAsseponents.WebAssemblyDRendering.WebAsseponents.RenderTree.RenderBatch& batch) <0x2cd2fc8 + 0x0001e> в: 0 в Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x2b81948 + 0x000f2> в: 00x2b81948 + 0x000f2> в: 00x2b81948 + 0x000f2> в: 0

Я создал видео, чтобы повторить шаги, используя код, указанный в URL-адресе Github. Видео с шагами репо доступно по адресу https://1drv.ms/u/s!AoG_S7xXx9nDhpMyVM9FqmtFP1ci6w?e=FfYs4y.

Answer 1

Мне удалось решить эту проблему. Я изменил вызовы на InvokeVoidasync, и вся передача параметров обрабатывалась с помощью sessionstorage/localstorage. Я использовал таймер на странице Blazor. Итак, я реализовал метод Dispose с помощью IDisposable. Но для выполнения операции по очистке удаления элемента управления видео мне снова пришлось вызвать Javascript. Я не мог этого сделать в Dispose, потому что Dispose был методом синхронизации. GetAwaiter().GetResult(), так реализован IAsyncDisposable. Затем я использовал методы disposeasync и dispose. Эти вещи устранили проблему.