Пытаясь использовать `unmountComponentAtNode` из Reaction-DOM, и я получаю errpor` main. js: 36 Uncaught (в обещании) `

Question

Я пытался удалить элемент из DOM и пытался использовать unmountComponentAtNode, потому что я все еще каким-то образом регистрировал события щелчка. Однако, когда я пытаюсь запустить

handleClickOutside= async () =>{
    console.log('the click is  outside');
    this.myRef = null;
    var element = await document.getElementsByClassName('RequestDropDown_container');
    if (element.length == 0) {
        return
    }

    element[0].parentNode.removeChild(element[0]);
    unmountComponentAtNode(element[0]);       //error is happening here
  }

, я получаю следующую ошибку в консоли

main.js:36 Uncaught (in promise) Error: Minified React error #40; visit https://reactjs.org/docs/error-decoder.html?invariant=40 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at t.unmountComponentAtNode (VM4083 main.js:36)
    at ba.<anonymous> (VM4083 main.js:52)
    at Generator.next (<anonymous>)
    at n (VM4083 main.js:1)
    at s (VM4083 main.js:1)

Есть ли что-то, что я должен сделать по-другому

Answer 1

Вы щелкнули ссылку в этом сообщении об ошибке?

main. js: 36 Uncaught (в обещании) Ошибка: ошибка Minified React # 40; посетите https://reactjs.org/docs/error-decoder.html?invariant=40 для полного сообщения или используйте неминифицированную среду разработки для полных ошибок и дополнительных полезных предупреждений.

Там написано:

unmountComponentAtNode (...): целевой контейнер не является элементом DOM.

Объясните:

// First you remove the `element[0]` DOM node,
element[0].parentNode.removeChild(element[0]);

// then you tell ReactDOM to unmount component at node `element[0]`
unmountComponentAtNode(element[0]);
// which is already removed from DOM tree
// thus you get an error

Решение, просто удалите эту строку:

element[0].parentNode.removeChild(element[0]);