React 16：错误：无法在已卸载的组件上找到节点

Question

我最近将项目从 React v15.2.1 升级到 16.4.1，我的侧边栏组件抛出以下错误：

Error: Unable to find node on an unmounted component. bundle.js line 1326 > eval:42:15
invariant
webpack:///./node_modules/fbjs/lib/invariant.js?:42:15
findCurrentFiberUsingSlowPath
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:3817:7
findCurrentHostFiber
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:3886:23
findHostInstance
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:16824:19
findDOMNode
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:17310:12
handleClickOutside
webpack:///./src/components/simulator/sidebar/Sidebar.js?:99:31
handleClickOutside self-hosted:984:17

根据错误消息，我相信在handleClickOutside(event)方法中调用ReactDOM.findDOMNode(this)时发生错误。

我正在使用的组件可以在这里找到：https://ashiknesin.com/blog/build-custom-sidebar-component-react/， 我把它稍微改了一下：

import React from 'react'
import ReactDOM from 'react-dom'
import classNames from 'classnames'
import SimulatorForm from './SimulatorForm'
import './Sidebar.scss'

const  openForm = require('../../../public/icons/si-glyph-arrow-left.svg');
const closeForm = require('../../../public/icons/si-glyph-arrow-right.svg');
const   pinForm = require('../../../public/icons/si-glyph-pin-location-love.svg');
const unpinForm = require('../../../public/icons/si-glyph-pin-location-delete.svg');

class Sidebar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            showMenu: false,
            isMenuPinned: false,
            formIcon: openForm,
            pinIcon: pinForm,
            modelsDescription: props.modelsDescription
        }
        // Methods to pin/unpin the Form
        this.toggleMenu = this.toggleMenu.bind(this)
        this.pinMenu = this.pinMenu.bind(this)
        // Handlers
        this.handleSelectedModelChange = this.props.handleSelectedModelChange
        this.handleNewMasterGraphsData = this.props.handleNewMasterGraphsData
        this.handleNewResults = this.props.handleNewResults
    }
    componentWillReceiveProps(nextProps) {
        this.setState({ modelsDescription: nextProps.modelsDescription});
    }
    componentDidMount() {
        document.addEventListener('click', this.handleClickOutside.bind(this), true);
    }

    componentWillUnmount() {
        document.removeEventListener('click', this.handleClickOutside.bind(this), true);
    }
    pinMenu() {
        this.setState({
            isMenuPinned: !this.state.isMenuPinned,
            pinIcon: this.state.isMenuPinned ? pinForm : unpinForm
        });
    }
    toggleMenu() {
        this.setState({
            showMenu: !this.state.showMenu,
            formIcon: this.state.showMenu ? openForm : closeForm
        });
    }
    handleClickOutside(event) {
        if (!this.state.isMenuPinned) {
            const domNode = ReactDOM.findDOMNode(this);

            if ((!domNode || !domNode.contains(event.target))) {
                this.setState({
                    showMenu: false,
                    formIcon: openForm
                });
            }
        }
    }

    render() {
        const showMenu = this.state.showMenu;
        const sidebarClass = classNames({
            'sidebar': true,
            'sidebar-menu-expanded': showMenu,
            'sidebar-menu-collapsed': !showMenu
        });

        const elementsClass = classNames({
            'expanded-element': true,
            'is-hidden': !showMenu,
        });

        return (
            <nav className={sidebarClass}>
                <img className="menuIcon" src={this.state.formIcon} height="42" width="42" onClick={this.toggleMenu} />
                <ul>
                    <li>
                        {
                            this.state.showMenu ? <img className="pinIcon" src={this.state.pinIcon}  height="42" width="42" onClick={this.pinMenu} /> : null
                        }
                    </li>
                    <li>
                        {
                            this.state.showMenu ?  <SimulatorForm modelsDescription={this.state.modelsDescription} handleSelectedModelChange={this.handleSelectedModelChange}
                                                    handleNewMasterGraphsData={this.handleNewMasterGraphsData} handleNewResults={this.handleNewResults} /> : null
                        }        
                    </li>
                </ul>
            </nav>
        )
    }
}


export default Sidebar

最后，只有当我重新加载页面时才会抛出错误。如果我不这样做，它似乎工作得很好。您有什么建议或建议来确保不再抛出错误吗？

我一直在网上阅读有关此问题的信息，但找不到解决方案。另外，我不认为这被列为重大更改，但我可能是非常错误的。

Answer 1

在代码原作者的帮助下，我最终找到了解决方案。链接可以在这里找到。 这是我的绑定的问题，更多详细信息请参见链接。

我改变了：

componentDidMount() {
   document.addEventListener('click', this.handleClickOutside.bind(this), true);
}

componentWillUnmount() {
   document.removeEventListener('click', this.handleClickOutside.bind(this), true);
}

到

componentDidMount = () => {
   document.addEventListener("click", this.handleClickOutside, true);
};

componentWillUnmount = () => {
   document.removeEventListener("click", this.handleClickOutside, true);
};

Answer 2

我只是使用另一个包中的材质 ui 菜单并遇到了同样的问题，这很奇怪，但安装最新的（类似于 spa 版本）react-dom 解决了问题。

Answer 3

我的测试也有同样的问题

Unable to find node on an unmounted component.
      84 |         );
      85 |         expect(wrapper.container.findAllByType(Text).length).toBe(1);
    > 86 |         expect(wrapper.findByText(text)).not.toBeNull();
         |                        ^
      87 |
      88 |         const wrapperChildren = (await wrapper.findByTestId('TileContentWrapper')).children;
      89 |         expect(wrapperChildren.length).toBe(1);