Я пытаюсь установить состояние моего компонента перед его монтированием (в cmoponentWillMount) с данными, которые я извлекаю из Firebase, но я получаю сообщение об ошибке: «Не могу прочитать свойство setState из undefined. Как правильно установить состояние, чтобы мой компонент загружает нужные данные?

componentWillMount(){
  const rootRef = fire.database().ref('groups')
  rootRef.limitToFirst(1).once('value', function(snap) {
    snap.forEach(function(child){
      var first = (child.val()).id;
      console.log(first);
      this.setState({ selectedGroupId: first });
    })
  });
}
1
Ben Cavenagh 23 Окт 2018 в 19:34

2 ответа

Лучший ответ

Попробуй это.

Никогда не выполняйте setState в цикле, и вы получите эту ошибку, потому что используете обычную функцию, поэтому измените ее на стрелочную функцию, как показано ниже. Также переключитесь на метод componentDidMount, потому что componentWillMount устарел

  componentDidMount(){
      const rootRef = fire.database().ref('groups')
      rootRef.limitToFirst(1).once('value', snap => {
      let first = 0;
      snap.forEach(child => {
          first = (child.val()).id;
          console.log(first);
     })
     this.setState({ selectedGroupId: first });
     });
  }

Или привяжите его вот так, если вам не нравится использовать стрелочную функцию

   componentDidMount(){
         const rootRef = fire.database().ref('groups')
         rootRef.limitToFirst(1).once('value', function(snap) {
              let first = 0;
              snap.forEach(function(child){
                    first = (child.val()).id;
                    console.log(first);
               }.bind(this));
             this.setState({ selectedGroupId: first });
            }.bind(this));
     }

Начните использовать let & const вместо var.

1
Hemadri Dasari 23 Окт 2018 в 17:02

Это потому, что область действия this не определена. Вам нужно передать это с помощью стрелочных функций ES6.

componentWillMount(){
  const rootRef = fire.database().ref('groups')
  rootRef.limitToFirst(1).once('value', (snap) => {
    snap.forEach((child) => {
      var first = (child.val()).id;
      console.log(first);
      this.setState({ selectedGroupId: first });
    })
  });
}

Попробуйте это так.

1
seanulus 23 Окт 2018 в 16:48
52953897