Question

我正在用React在Bootstrap上尝试，但进展并不顺利。我正在尝试使用reactstrap中的Collapse类来实现一些简单的响应式Navbar行为，但是React正在抛出：

react-dom.development.js:55 Uncaught Error: Unable to find node on an 
unmounted component.
at invariant (react-dom.development.js:55)
at findCurrentFiberUsingSlowPath (react-dom.development.js:4256)
at findCurrentHostFiber (react-dom.development.js:4266)
at findHostInstance (react-dom.development.js:17676)
at Object.findDOMNode (react-dom.development.js:18145)
at Transition.updateStatus (reactstrap.es.js:1911)
at Transition.componentDidUpdate (reactstrap.es.js:1878)
at commitLifeCycles (react-dom.development.js:14369)
at commitAllLifeCycles (react-dom.development.js:15462)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at commitRoot (react-dom.development.js:15603)
at completeRoot (react-dom.development.js:16618)
at performWorkOnRoot (react-dom.development.js:16563)
at performWork (react-dom.development.js:16482)
at performSyncWork (react-dom.development.js:16454)
at interactiveUpdates$1 (react-dom.development.js:16719)
at interactiveUpdates (react-dom.development.js:2150)
at dispatchInteractiveEvent (react-dom.development.js:4532)

这是我的代码：

import React, { Component } from "react";
import { Collapse } from "reactstrap";

class Navigation extends Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      collapse: false
    };
  }

  toggle() {
    this.setState({ collapse: !this.state.collapse });
  }

  render() {
    return (
      <div className="navbar">
        <div className="container-fluid">
          <a href="#" className="navbar-brand">
            Title
          </a>

          <button type="button" onClick={this.toggle} >
            Toggle
          </button>

          <Collapse isOpen={this.state.collapse}>
            <div className="navbar-nav">
              <a href="#" className="nav-item nav-link">
                LINK
              </a>
              <a href="#" className="nav-item nav-link">
                LINK
              </a>
              <a href="#" className="nav-item nav-link">
                LINK
              </a>
              <a href="#" className="nav-item nav-link">
                LINK
              </a>
            </div>
          </Collapse>
        </div>
      </div>
    );
  }

}

export default Navigation;

我是React的新手，所以我真的不知道发生了什么。感谢您的帮助。

Answer 1

您提供的信息不足。例如，您正在使用哪个版本的React。无论如何，我将开始更改您处理binding的方式。我知道导致类似错误的情况。看看提供的代码段，让我知道这对您有帮助。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
    <div>
     <p> Toggle with me, please :)</p>
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"><div>

Answer 2

问题是我没有安装适当的依赖项。我需要：

reactstrap
react
react-dom
react-transition-group
react-popper

反应“无法在未安装的组件上找到节点”

2 个答案: