Question

我的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 数组是在渲染完成后而不是在初始化之前初始化的，我如何等待数据获取和排序完成然后渲染数据？

Answer 1

通过this.setState()的

设置状态总是重新提供组件。如果您想重新提交一个变量的最新值，请将其置于状态。将customerView置于状态并通过this.setState()更新它可能会在这里解决您的问题。

Answer 2

当您尝试获得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
      }

Answer 3

不确定要渲染的内容。名称列表？

您正在谈论的行似乎不起作用，因为customerTickets.push无法将react元素推入数组。

您甚至可以在开发人员控制台中尝试

让数组= [] arr.push（测试）

结果为“未捕获的SyntaxError”

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

3 个答案: