反应：对象。“值名称”未定义

Question

我试图填充一个对象，然后在React的应用程序渲染中显示它： 我用以下方式填充它：

  var query = firebase.database().ref("salas").orderByKey();
        query.once("value")
          .then(function(snapshot) {
          snapshot.forEach(function(childSnapshot) {
            var key = childSnapshot.key;
            var prueba = childSnapshot.val();
            prueba.key = key;
            var ref = firebase.database().ref("salas/" + prueba.key);
            ref.once("value")
              .then(function(snapshot) {
                var b = snapshot.child("Usuarios").numChildren();
                prueba.unidos = b;
              });
            sala_prueba.push(prueba);

        });
      this.setState({
        salas : sala_prueba
      });
      }.bind(this));

我这样渲染它：

render（）{

const ArraySalas = this.state.salas.map((datos,index) =>{
  console.log(datos);
  console.log(datos.unidos);

   return(
     <div className="col-sm-4" key={index}>
         <div className="card text-center" >
          <div className="card-body">
            <h5 className="card-title"> {datos.nombre} </h5>
            <p className="card-text">Tamaño sala {datos.tamaño}</p>
            <p className="card-text">Usuarios unidos {datos.unidos}</p>
            <button className="btn btn-primary" id={datos.key} onClick={this.Unirse.bind()}> Unirse </button>
          </div>
        </div>
    </div>
   )
});

    return (
      <div className="App">
          <Alert/>
            <nav className="navbar navbar-dark bg-dark justify-content-between">
            <a className="navbar-brand logo">Juego</a>
            <form className="form-inline">
              {this.RenderBoton()}
            </form>
            </nav>
            <container-fluid>
              <div className="col-sm-12 mt-2">
                <div className="row">
                  {ArraySalas}
                </div>
              </div>
            </container-fluid>
      </div>
    );
  }
}

“ datos”的console.log显示对象，而“ datos.unidos”显示Undefined，为什么？