Не удалось выполнить команду removeChild на узле при добавлении owlCarousel-2 в мое приложение реакции - PullRequest
Новая
       28

Не удалось выполнить команду removeChild на узле при добавлении owlCarousel-2 в мое приложение реакции

0 голосов
/ 27 сентября 2018

Мое приложение реагирует на переключение между массивами в "chars".И это работает хорошо, когда не добавляются функции owlCarousel componentDidMount() { $('.owl-items').owlCarousel(); } Когда я добавляю его и нажимаю кнопку «другие», я получаю эту ошибку: реагировать-dom.development.js: 8849 Неудачное DOMException: Не удалось выполнить «removeChild» в«Узел»: удаляемый узел не является дочерним узлом этого узла.

Я понял, что это происходит, когда массив «chars.others» имеет длину, отличную от других (chars.letters иchars.numbers).И все работает хорошо, когда все массивы имеют одинаковую длину.

Кто-нибудь знает, что происходит и есть ли решение?Спасибо, это мой первый вопрос здесь: P 

`const chars = {
  letters: ['a','e','i','o','u'],
  numbers: [1,2,3,4,5],
  others: ['@','#','%','$']
}

class MyApp extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      kind: 'letters'
    }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(value) {
    this.setState({
      kind: value
    });
  }

  componentDidMount() {
    $('.owl-items').owlCarousel();
  }

  render () {
    const items = chars[this.state.kind].map(
      (item,index) => <div key={index}>{item}</div>
    )
    return (
      <div>
        <button onClick={() => this.handleClick('letters')}>letters</button>
        <button onClick={() => this.handleClick('numbers')}>numbers</button>
        <button onClick={() => this.handleClick('others')}>others</button>
        <div className="owl-items owl-theme owl-carousel">
          {items}
        </div>
      </div>
    );
  }
}

ReactDOM.render( <MyApp />, document.getElementById('container') );`
...