Не удается получить доступ к объекту, переданному компоненту React

#javascript #reactjs #firebase

Вопрос:

Я хочу передать объект компоненту React. Этот объект является состоянием родительского элемента, который динамически обновляется с помощью обновлений из firebase. Однако, когда я передаю этот объект компоненту и пытаюсь получить доступ к его значению, я получаю undefined.

Когда я пытаюсь зарегистрировать этот объект в консоли, он показывает пару ключ-значение с Value below was just evaluated now . Как мне получить доступ к атрибутам этого объекта?

Состояние родительского

 state = {
    isSignedIn: false,
    userVal: {},
    cards: {},
    coin: 0,
    room_id: 0
  };

Объект обновляется

 db.collection("users").doc(this.state.userVal.uid).onSnapshot(query => {
        let q = query.data();
        this.setState({ room_id: q.room_id, coin: q.coins });
        for (const key in q) {
          if (key !== "room_id" amp;amp; key !== "name" amp;amp; key !== "coins" amp;amp; key !== "email" amp;amp; key !== "no") {
            let temp = this.state.cards;
            temp[key] = q[key];
            this.setState({ cards: temp });
          }
        }
      })

Объект, переданный компоненту

 <Cards id={this.state.userVal.uid} room_id={this.state.room_id} cards={this.state.cards} />

this.state.cards является проблемным

1. Было бы полезно, если бы вы показали нам часть вашего кода.

2. вероятно, это потому, что получение firebase является асинхронной функцией.

3. не использовать set State в цикле, прежде всего, не очень хороший подход

4. Примите ответ, если он работает.

5. @BillF, вероятно, ты прав

Ответ №1:

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

   db.collection("users").doc(this.state.userVal.uid).onSnapshot(query => {
    let q = query.data();
    this.setState({ room_id: q.room_id, coin: q.coins });
    q.forEach((key) => {
      if (key !== "room_id" amp;amp; key !== "name" amp;amp; key !== "coins" amp;amp; key !== "email" amp;amp; key !== "no") {
        let temp = this.state.cards;
        temp[key] = q[key];
        this.setState({ cards: temp });
      }
    })
  })

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