javascript - Reactjs : Return function result to webpage

Question

我创建了一个名为 belowEighteen() 的函数，它使用 res.size() 返回 Firestore 中的文档数量。我想通过使用 {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

您正在 Promise 函数中返回值，因此不会直接从 belowEighteen 函数返回，而是从 Promise 函数返回。一种选择是使用 React 状态。

在构造函数中定义状态变量:

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

调整函数和 UI 以使用状态变量:

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>