Реакция "Невозможно найти узел на не смонтированном компоненте" - PullRequest
Новая
       24

Реакция "Невозможно найти узел на не смонтированном компоненте"

0 голосов
/ 05 октября 2018

Я пробую свои силы в Bootstrap с React, и это не очень хорошо.Я пытаюсь использовать класс Collapse из Reactionstrap, чтобы реализовать простое поведение 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, поэтому я не знаю, что именно происходит.Спасибо за вашу помощь.

Ответы [ 2 ]

0 голосов
/ 06 октября 2018

Проблема заключалась в том, что у меня не были установлены надлежащие зависимости.Мне нужно было: 

reactstrap
react
react-dom
react-transition-group
react-popper
0 голосов
/ 05 октября 2018

Недостаточно информации, предоставленной вами.Например, какую версию 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>
...