React 16: Error: Unable to find node on an unmounted component
React 16: Error: Unable to find node on an unmounted component
我最近将我的项目从 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
最后,只有在我重新加载页面时才会抛出错误。如果我不这样做,它似乎工作得很好。您有什么建议或推荐来确保错误不会再次抛出吗?
我一直在网上阅读有关此内容的信息,但找不到解决方法。另外,我不认为这被列为重大更改,但我可能错了。
好的,在代码原作者的帮助下,我最终找到了解决方案。 Link 可以找到 here。
这是我的绑定问题,有关 link.
的更多详细信息
所以,这就是我所做的。我改变了:
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);
};
我刚刚使用 material ui 来自另一个包的菜单并遇到了同样的问题,这很奇怪但是安装最新版本(类似于 spa 版本)react-dom 解决了这个问题。
我最近将我的项目从 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
最后,只有在我重新加载页面时才会抛出错误。如果我不这样做,它似乎工作得很好。您有什么建议或推荐来确保错误不会再次抛出吗?
我一直在网上阅读有关此内容的信息,但找不到解决方法。另外,我不认为这被列为重大更改,但我可能错了。
好的,在代码原作者的帮助下,我最终找到了解决方案。 Link 可以找到 here。 这是我的绑定问题,有关 link.
的更多详细信息所以,这就是我所做的。我改变了:
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);
};
我刚刚使用 material ui 来自另一个包的菜单并遇到了同样的问题,这很奇怪但是安装最新版本(类似于 spa 版本)react-dom 解决了这个问题。