如何等待firebase数据获取完成并在react-native中获取不是承诺的值？

Posted 2023-05-07

【中文标题】如何等待firebase数据获取完成并在react-native中获取不是承诺的值？

【英文标题】：How to wait for firebase data fetch finishes and get values not a promise in react-native?

【发布时间】：2019-11-17 10:48:21

【问题描述】：

我在 firebase 数据中有如下数据：

获取客户数据的代码：

getCustomersOnQeueu = async () => 
        let customers = this.customersRef.orderByChild("ticket").once('value')
        return customers
      

渲染数据的代码：

renderCustomers = () => 
        let customersViews = []
         this.getCustomersOnQeueu().then((customers) => 
           let customersTickets = customers.val()
           console.log(customersTickets)
           let sortedKeys = Object.keys(customersTickets).sort(function(a, b)
             return customersTickets[b].ticket - customersTickets[a].ticket
           )
           console.log(sortedKeys)
           for(i=0; i<sortedKeys.length; i++) 
             let key = sortedKeys[i]
             console.log(customersTickets[key]["customer"])
             customersViews.push(<View>
               <Text>customersTickets[key["customer"]</Text>
             </View>)
           
         )
       return (<View>
         <Text>Available Customers: </Text>
         customersViews
         </View>)
      

  render() 
   return (
    <View>
       this.renderCustomers()
    </View>
)

现在在获取和排序数据后，我可以在控制台中看到以下内容：

我有一个问题是这行代码永远不会执行：

customersViews.push(<View>
               <Text>customersTickets[key["customer"]</Text>
             </View>)

我猜这可能是因为 customersViews 数组是在渲染完成后而不是之前初始化的，我如何等待数据获取和排序完成然后渲染数据？

【参考方案1】：

当您尝试获得 Firebase 响应时，您实际上并没有等待它。下面的代码不会等待它被执行。

getCustomersOnQeueu = async () => 
        let customers = this.customersRef.orderByChild("ticket").once('value')
        return customers
      

要等待它被执行，请使用 AWAIT：

getCustomersOnQeueu = async () => 
        let customers = await this.customersRef.orderByChild("ticket").once('value')
        return customers
      

【参考方案2】：

通过this.setState() 设置状态总是会重新渲染组件。如果你想重新渲染一个 vraible 的最新值，把它放在 state 中。将 customerViews 置于状态并通过 this.setState() 更新它可能会解决您的问题。

【讨论】：

是的，但我仍然需要完成 firebase 数据提取，以便知道何时更新视图。

this.getCustomersOnQeueu().then() 然后在获取数据后执行。您不必担心完成提取。

无论何时调用then()，状态都会更新，因此会发生重新渲染。您不必为此担心。

重新渲染视图将使渲染无限循环，因为我每次调用render() 内的this.renderCustomers 调用this.setState() 都会无限循环。

【参考方案3】：

不确定您要渲染什么。名单？

您所说的行似乎不起作用，因为customersTickets.push 无法将反应元素推送到数组。

你甚至可以在你的开发者控制台中尝试一下

让数组 = [] arr.push(测试)

结果是“未捕获的语法错误”