处理Firebase的异步功能

Question

因此，我将firebase用作我使用react native创建的移动应用程序的数据库。我曾经在Web应用程序中使用过它，并且我记得firebase的某些部分是异步功能。现在，当我想在响应中使用firebase时，我遇到了同样的问题，而我却忘记了如何解决它。

function viewName(userId) {
  firebase.database().ref('player/' + userId).on('value', (snapshot) => {
    const userName = snapshot.val.name;
    return userName;
  });
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
  <Text>{viewName('0')}</Text>
    </View>
  );
}

这只是一个模拟应用，不是真正的应用。我正在尝试使用键“ 0”（玩家/ 0 /名称）接收用户名，然后在应用程序屏幕上将其显示为。但正如您所猜测的那样，viewName（）函数什么也不返回...

有人可以帮我吗？（抱歉，这听起来很愚蠢，或者我的问题没有道理。第一次在这里提问，并且第一次使用react）

Answer 1

function viewName(userId, cb) {
  firebase.database().ref('player/' + userId).on('value', (snapshot) => {
    const userName = snapshot.val.name;
    cb(userName);
  });
}

export default function App() {
  const [username, setUsername] = React.useState('')
  React.useEffect(() => {
    viewName('0', setUsername)
  }, [])

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Text>{username}</Text>
    </View>
  );
}