TypeError：未定义不是对象（评估事件[0].name）

Question

为什么我不能访问我已经在 then 块中设置的状态？ events[0].name 是导致此错误的原因。如何将数据传递给我的时间轴组件来处理这种异步性？

  const Finalized = (props) => {
  const [events, setEvents] = React.useState([]);


  React.useEffect(() => {
    firebase
      .database()
      .ref("events/adventure")
      .once("value")
      .then((snapshot) => {
        setEvents(snapshot.val());
        // Not sure why when i console.log(events[0].name) my terminal gets flooded with the output
      });
  });
  let data = [
    {
      time: "09:00",
      title: "Event 1",
      description: <Text>{events[0].name}</Text>,
    },
  ];
  return (
    <View style={styles.container}>
      <Timeline style={styles.list} data={data} />
    </View>
  );
};

Answer 1

您正在异步设置事件，但尝试访问数据数组中的 events[0].name。 因此，在加载事件之前的初始渲染中，您将收到此错误。

您可以做的一个修复是有条件地设置描述 描述：{events[0]?.name}，

或仅当事件数组至少有一个元素时才呈现时间轴

  return (
    <View style={styles.container}>
     { events.length===1&& <Timeline style={styles.list} data={data} /> }
    </View>
  );

最好对你的 snapshot.val() 做一个控制台日志，以检查你从 firebase 获得的值。