Извлечение данных из Firestore

Question

Итак, я пытаюсь получить данные из Firestore, когда я консоль регистрирую их, я возвращаю содержимое своей коллекции обратно, но когда я перемещаю код в функцию, я не могу вернуть его обратно.

Этот код работает:

const db = firebase.firestore();
db.settings({ timestampsInSnapshots: true});
db.collection('story').get().then((snapshot) => {
snapshot.docs.forEach(doc => {console.log(doc.data())
    ;})
})

Это не работает.(компилируется, но ничего не возвращает):

...
getMyStory = () => {
        const db = firebase.firestore();
        db.settings({ timestampsInSnapshots: true});
        db.collection('story').get().then((snapshot) => {
        snapshot.docs.forEach(doc => {
            let items = doc.data();
        })
        });
        return this.items;
    }


    render () {


        return (
        <p>{this.getMyStory}</p>
);
}

Что я делаю не так?

Answer 1

Объект Promise представляет возможное завершение (или сбой) асинхронной операции и его результирующее значение

На основании вашего кода return this.items; сначала выполняется, а затем разрешается db.collection ('story'). get () , в итоге никогда не получит результаты.

В основном эта строка:

db.collection('story').get()

это обещание, тогда вы должны подождать, чтобы решить результат, код ниже:

getMyStory = () => {
    const db = firebase.firestore();

    db.settings({ timestampsInSnapshots: true});

    return db.collection('story').get()
}

Подробнее об обещаниях

======================= РЕДАКТИРОВАТЬ =========================

getMyStory().then((snapshot) => {
    const listItems = snapshot.map((element) =>
      <li>{element}</li>
    );

    ReactDOM.render(
      <ul>{listItems}</ul>,
      document.getElementById('root')
    );
});

Подробнее о карте

Answer 2

Основная проблема заключается в том, что вы пытаетесь визуализировать асинхронные данные синхронно, что невозможно сделать с реакцией (пока, по крайней мере) .

При рендеринге асинхронных данныхВы обычно используете компонент state .

Ниже приведен стандартный шаблон использования при загрузке и рендеринге чего-либо асинхронного.

class YourComponent extends Component {
  state = {
    items: []
  }

  // This method is called when the component mounts
  // Usually  a good place to do async requests
  componentDidMount() {

    db.collection('story').get().then(snapshot => {
      // After promise is finished set data to local state
      // When setting state the render method will be called, thus rerendering the UI
      this.setState({ items: snapshot })
    })
  }

  render() {
    // Access your items from local component state
    const { items } = this.state;

    return (
      <div>
        {items.forEach(doc => {
          // Render whatever data is in your document
          return <p key={doc.id}> { Your data goes here }</p>
        })
        }
      </div>
    )
  }
}

Answer 3

Ваша логика рендеринга должна учитывать асинхронный запрос к Firebase.Чтобы решить эту проблему, используйте свои компоненты state, внеся следующие изменения в свой код:

getMyStory() { /* Remove arrow function */

    const db = firebase.firestore();
    db.settings({ timestampsInSnapshots: true});
    db.collection('story').get().then((snapshot) => {

      snapshot.docs.forEach(doc => {
          let items = doc.data();

          /* Make data suitable for rendering */
          items = JSON.stringify(items);

          /* Update the components state with query result */
          this.setState({ items : items }) 
      });

    });
}

Затем добавьте componentDidMount() к своему компоненту, а затем добавьте вызов к getMyStory()вот так:

componentDidMount() {

    /* Cause your component to request data from Firebase when
       component first mounted */
    this.getMyStory()
}

Наконец, обновите ваш метод рендеринга, чтобы использовать состояние, а не метод:

  render () {

    return (<p>{ this.state.items || 'Loading' }</p>);
 }

Надеюсь, это поможет!