Javascript 引号内的访问函数

我正在从firebase db获取一些数据（foo）。目前，我只能使用函数displayValue（）访问此数据。虽然我不知道如何将此功能放在视频标签中。因为我需要首先从firebase获取数据，所以函数需要介于url={..}之间，但我不确定如何做到这一点

var foo;
firebase
  .database()
  .ref(`/topics/lec1`)
  .once("value")
  .then(function(snapshot) {
    foo = snapshot.val();
    displayValue(); // after getting value display in fucntion
  });


 function displayValue() {
      //foo
      //value foo from firebase 
     foo;
    }

return(
      <Video url={displayValue(..)} // foo value needs to show here after getting value
...

var-foo；
火基
.数据库（）
.ref（`/topics/lec1`）
.一次（“价值”）
.then（功能（快照）{
foo=snapshot.val（）；
displayValue（）；//在函数中获得值显示后
});
函数displayValue（）{
//福
//来自firebase的值foo
傅；
}
返回(
试试这个：

class YourComponent {
    state = {
        foo: null
    };

  componentDidMount() {
    let foo;
    firebase
      .database()
      .ref('/topics/lec1')
      .once('value')
      .then((snapshot) => {
        foo = snapshot.val();
        this.setState({ foo });
      });
  }

  render() {
      const { foo } = this.state;
      if (!foo) return null;

      return <Video url={foo} />
  }
}

class组件{
状态={
foo:null
};
componentDidMount（）{
让福；
火基
.数据库（）
.ref（“/topics/lec1”）
.once（'值'）
。然后（（快照）=>{
foo=snapshot.val（）；
this.setState（{foo}）；
});
}
render（）{
const{foo}=this.state；
如果（！foo）返回null；
返回
}
}
Happy coding:）