Обработка асин c функция Firebase

Question

Так что я использую firebase в качестве базы данных для своего мобильного приложения, которое я создаю с помощью собственного кода. Однажды я использую его в веб-приложении, и я помню, что есть некоторая часть firebase, которая является функцией asyn c. Теперь, когда я хочу использовать 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» (player / 0 / name), а затем показать его, как на экране приложения. Но, как вы можете догадаться, функция viewName () ничего не возвращает ...

Может кто-нибудь мне помочь? (Извините, если это звучит глупо или если мой вопрос не имеет смысла. Первый раз спрашиваю здесь, а первый раз использую реагирование)

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>
  );
}