Reactjs: возврат результата функции на веб-страницу

Question

Я создал функцию с именем belowEighteen(), которая возвращает количество документов из хранилища с помощью res.size (). Я хочу отобразить возвращенное значение на веб-странице, вызвав функцию с помощью {belowEighteen()}, но она ничего не отображает на веб-странице.

Консоль, однако, возвращает значение, которое я хочу. Мне просто нужно, чтобы он теперь отображался на экране

Вот код для belowEighteen() функции:

belowEighteen (){
        const db = firebase.firestore();
        db.collection('answers')
        .where('age', '==', 'Less than 18')
        .get()
        .then((res) => { 
            // Display total number to console 
            console.log(res.size);
            return (res.size);
        })
        .catch((error) => {
            console.log(`Error getting documents: ${error}`);
            //to_return = " ";
        });

    }

Вот код, который я использовал для вызова функции в моем render() :

<li>Less than 18 (Total: {this.belowEighteen()} )</li>

Answer 1

Вы возвращаете значение в функции обещания, чтобы оно не возвращалось напрямую из функции belowEighteen, а скорее возвращалось из функции обещания. Можно использовать состояние React.

Определить переменную состояния в конструкторе:

constructor() {
  this.state = {
    total: 0
  }
}

Настройте функцию и интерфейс для использования переменной состояния:

belowEighteen () {
  const db = firebase.firestore();
  db.collection('answers')
  .where('age', '==', 'Less than 18')
  .get()
  .then((res) => { 
      // Display total number to console 
      console.log(res.size);
      this.setState({
        total: res.size
      })
  })
  .catch((error) => {
      console.log(`Error getting documents: ${error}`);
      //to_return = " ";
  });
}

<li>Less than 18 (Total: {this.state.total} )</li>