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

【问题标题】：How to render components that rely on firebase async functions?如何渲染依赖 firebase 异步函数的组件？
【发布时间】：2020-05-29 13:48:48
【问题描述】：

我无法让我的组件呈现来自 events[0] 的值。我尝试将数据数组放在 .then 块中，但范围界定被搞砸了。由于 firebase 请求是异步的，我怎样才能让整个组件仅在我从 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>
  );
};

【问题讨论】：

标签： firebase react-native firebase-realtime-database

【解决方案1】：

您可以使用名为events 的state 来代替变量。

这是怎么做的......

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

【讨论】：