Как визуализировать компоненты, которые полагаются на функции firebase asyn c?

Question

Я не могу заставить мой компонент отображать значение из events [0]. Я попытался поместить массив данных в блок .then, но область видимости запуталась. Поскольку запросы firebase являются асинхронными c, как я могу сделать рендеринг всего компонента только тогда, когда я получаю свои данные из firebase?

Finalized. js

const Finalized = () => {
  let events = [];
  firebase
    .database()
    .ref("events/arts/" + 2 + "/name")
    .once("value")
    .then((snapshot) => {
      events.push(snapshot.val());
    });
  let data = [{
      time: "09:00",
      title: "Event 1",
      description: <Text>{events[0]}</Text>,  // {events[0]} has no value returned
    }];
  return (
    <View style={styles.container}>
      <Timeline style={styles.list} data={data} />
    </View>
  );
};

Answer 1

Вы можете использовать state с именем events вместо переменной.

Вот как это сделать ...

const [events, setEvents] = useState([]);

const Finalized = () => {
  firebase
    .database()
    .ref("events/arts/" + 2 + "/name")
    .once("value")
    .then((snapshot) => {
      setEvents(snapshot.val());
    });
  let data = [{
      time: "09:00",
      title: "Event 1",
      description: <Text>{events[0]}</Text>,
    }];
  return (
    <View style={styles.container}>
      <Timeline style={styles.list} data={data} />
    </View>
  );
};