如何在映射之前等待加载数据？

Question

我正在尝试映射存储在数组中的一些数据（下面的屏幕截图），但我似乎无法访问它，因为它是异步加载的。我怎么能等待数据？有没有办法在渲染函数中做到这一点？

      render() {
         
        return (
          {this.state.serials.map((number) => {
    return number.s && number.s.length? 
    (
        <h2 > {number.s[0].a}</h2>
  ) : null
})}
        )
    }

这是我获取数据的 componentDidMount()：

      componentDidMount() 
        const uid = this.state.user.uid;
        const gatewayRef = db.ref(uid + '/gateways');
        gatewayRef.on('value', (gateways_nums) => {
            const serialsArr = [];
          gateways_nums.forEach((gateway_num) => {
            const serialRef = db.ref('gateways/' + gateway_num.val()['gateway'])
            const last_temps =[];
            serialRef.on('value', (serials)=>{ 
                const ser = []
                serials.forEach((serial)=>{
                    ser.push(serial.val()['serial'])
                })
                last_temps.push({a: gateway_num.val()['gateway'], b: ser})
            })
            serialsArr.push({s:last_temps})
          });
          this.setState({serials:serialsArr})
        });
      }

我真的很感激任何帮助！