如何渲染依赖 firebase 异步函数的组件？

Question

I'm unable to have my component render the value from events[0]. I've tried putting the data array in the.then block but the scoping gets screwed up. Since firebase requests are async, how can I make the whole component render only when I receive my data from 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

You can use a state called events instead of the variable.

Here is how to do it...

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