小编Ale*_*ali的帖子

我最近将项目从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 = …

我认为我的应用程序在开发和生产模式下都遇到了热重载问题。

基本上，我有一个 index.js 文件，我在其中渲染一个 App 组件。在我的应用程序组件中，我只需控制台日志“Hello from APP”。在我看来，这应该只输出一次，但事实并非如此。输出如下：

[HMR] Waiting for update signal from WDS...
Hello from APP
[WDS] Hot Module Replacement enabled.
[HMR] Waiting for update signal from WDS...
Hello from APP
[WDS] Hot Module Replacement enabled.

完整的源代码可以在这里找到： https: //github.com/RosarioAleCali/react-example

谁能告诉我什么可能导致这个问题？也许是我的 webpack 配置文件？

另外，当我直接输入 URL 或刷新页面时，也会出现此问题。我很想修复它，因为在一个更复杂的示例中，我需要发出 API 请求并显示数据，因此当前热加载的方式根本不好。