Невозможно выполнить обновление состояния реагирования для неустановленного компонента. Это неоперация - Mob X - PullRequest
Новая
       8

Невозможно выполнить обновление состояния реагирования для неустановленного компонента. Это неоперация - Mob X

2 голосов
/ 08 мая 2019

В настоящее время я работаю над приложением типа «умный дом» и являюсь новичком, и я использую mobX для задания имен активных комнат.

Я установил их в компоненте «Панель инструментов» для заголовка контейнера.Затем я хочу использовать переменную, хранящуюся внутри, чтобы отфильтровать комнаты в другом компоненте под названием «комната».Если я жестко закодирую имя комнаты, оно работает, но выдает кучу ошибок, когда я заменяю имя комнаты на фактическую переменную.

Я уже пытался объявить вещи в componentWillUnmount(), но это не такТ работал до сих пор.

Здесь я устанавливаю переменную 

handleClick(e){

        this.props.roomStore.room = e.target.closest('.btn__toggle').querySelector('.btn__headline').innerHTML;
      }

Здесь я хочу получить комнату 

loadRooms(){
  if(this.state.isLoaded){
    var locations = this.state.things.filter( function (e){
      return e.location == this.props.roomStore.room}); //<- this is the relevant variable
          const habitems = locations.map((i, key) => 
          <div className="btn__toggle" key={i.UID} type="submit">
          <div className="btn__headline">{i.label}</div>
          </div>
              )
              return habitems;
            }         
}

И здесь я рендерирую свои элементы: 

render() {

        if(this.state.isLoaded){
          return (
            <div>
          <h1 id="h1">{this.props.roomStore.room}</h1>
          <div className="btn__wrapper">{this.loadRooms()}</div>
          </div>
          );
        }

Я предполагаю, что это может не сработать, потому что переменная устанавливается в другом компоненте до того, как вы на самом деле откроете нужный, который использует его при рендеринге, поэтому весь компонент визуализируется перед тем, как даже смонтирован.

Но я могу ошибаться в этом.Любая помощь приветствуется.Возникают следующие ошибки:

index.module.js: 860 Uncaught TypeError: Невозможно прочитать свойство 'props' из неопределенного

Указанная выше ошибка произошла в компоненте

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'props' из неопределенного

act-dom.development.js: 506 Предупреждение: Невозможно выполнить обновление состояния React для отключенного компонента.Это не работает, но это указывает на утечку памяти в вашем приложении.Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount.

1 Ответ

1 голос
/ 08 мая 2019

Проблема в том, что ваша функция фильтра не имеет доступа к this, что приводит к ошибке Cannot read property 'props' of undefined. Вы можете отфильтровать roomStore из вашего реквизита, используя заранее заданное деструктивное задание , и использовать его вместо доступа к this.props.

. 
loadRooms() {
    const { roomStore } = this.props;
    if (this.state.isLoaded) {
        var locations = this.state.things.filter( function (e){
            return e.location == roomStore.room
        });

        /* ... */
    }
}

Синтаксис деструктурирующего присваивания представляет собой выражение JavaScript, позволяющее распаковывать значения из массивов или свойства объектов в отдельные переменные.

...