Javascript Reactjs：将函数结果返回到网页

我创建了一个名为

belowEighteen（）

的函数，该函数返回firestore中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（）中调用函数的代码。

：

少于18（总计：{this.belowEighteen（）}）

您返回的是promise函数中的值，因此它不会直接从

belowEighteen

函数返回，而是从promise函数返回。一个选项是使用React状态

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

constructor（）{
此.state={
总数：0
}
}

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

belowEighteen（）{
const db=firebase.firestore（）；
db.collection（'答案'）
.where（'age'，'=='，'小于18'）
.get（）
.然后（（res）=>{
//向控制台显示总数
控制台日志（分辨率大小）；
这是我的国家({
总计：res.size
})
})
.catch（（错误）=>{
log（`Error get documents:${Error}`）；
//to_return=“”；
});
}

少于18（总计：{this.state.Total}）

您返回的是promise函数中的值，因此它不会直接从

belowEighteen

函数返回，而是从promise函数返回。一个选项是使用React状态

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

constructor（）{
此.state={
总数：0
}
}

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

belowEighteen（）{
const db=firebase.firestore（）；
db.collection（'答案'）
.where（'age'，'=='，'小于18'）
.get（）
.然后（（res）=>{
//向控制台显示总数
控制台日志（分辨率大小）；
这是我的国家({
总计：res.size
})
})
.catch（（错误）=>{
log（`Error get documents:${Error}`）；
//to_return=“”；
});
}

少于18（总计：{this.state.Total}）

但当我更新尺寸时，它不会更新状态。是的，但当我使用您的代码时，它仍然为0。这一行

少于18（总计：{this.state.Total}）

确实显示在我的UI上，尽管您使用的是“获取数据一次”函数-您只按预期检索一次值。不过，这是一个单独的问题。这是什么意思？我还是不明白。。对不起，我是个新手，你误解了Firebase，不是React。你的查询不是实时的；每次函数调用只能获取一次值。看看我之前给你的API链接。但是当我更新大小时它并没有更新状态。是的，但是当我使用你的代码时它仍然是0。这一行

少于18（总计：{this.state.Total}）

确实显示在我的UI上，尽管您使用的是“获取数据一次”函数-您只按预期检索一次值。不过，这是一个单独的问题。这是什么意思？我还是不明白。。对不起，我是个新手，你误解了Firebase，不是React。你的查询不是实时的；每次函数调用只能获取一次值。看看我之前给你的API链接。

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

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