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

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 null TypeError: Невозможно прочитать свойство removeChild со значением null в e (http://localhost: 5000 / _framework / blazor.webassembly. js: 1: 6918) в Object.e [as 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 / do tnet .3.2.0. js: 1: 172099) в wasm_invoke_iiiiii (http://localhost: 5000 / _framework / wasm / do tnet .wasm: wasm-function [3160]: 0x9b33d) в icall_trampoli ne_dispatch (http://localhost: 5000 / _framework / wasm / do tnet .wasm: wasm-function [5777]: 0xfe711) в mono_wasm_interp_to_native_trampoline (http://localhost: 5000 / _framework / wasm / do tnet .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 / do tnet .3.2.0. js: 1: 172099) в wasm_invoke_iiiiii (http://localhost: 5000 / _framework / wasm / do tnet .wasm: wasm-functi on [3160]: 0x9b33d) в icall_trampoline_dispatch (http://localhost: 5000 / _framework / wasm / do tnet .wasm: wasm-function [5777]: 0xfe711) в mono_wasm_interp_to_native_trampoline (http://localhost: 5000 / wasm tnet .wasm: wasm-function [4607]: 0xca81d) в Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled [T0, T1, T2, TResult] (идентификатор System.String, T0 arg0, T1 arg2), T2 arg1 0x2cd31a0 + 0x00046> в: 0 в Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled [T0, T1, TResult] (идентификатор System.String, T0 arg0, T1 arg1) <0x2cd30c0 + 0x000 inspents .WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsyn c (Microsoft.AspNetCore.Components.RenderTree.RenderBatch & batch) <0x2cd2fc8 + 0x0001e> в: 0 в Microsoft.AspNetCore.Components. in: 0

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

Answer 1

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