TypeError: undefined is not an object (评估 'events[genre][0]')答案

【问题标题】：TypeError: undefined is not an object (evaluating 'events[genre][0]')TypeError: undefined is not an object (评估 'events[genre][0]')
【发布时间】：2020-05-31 09:15:48
【问题描述】：

我正在尝试创建一个自定义数组，但 for 循环无法评估 events[genre][0].name，因为由于 firebase 的异步性质，尚未设置事件。有没有办法只在设置数据后才执行 for 循环或任何解决方法？

const Finalized = (props) => {
  const [events, setEvents] = React.useState([]);
  const testEvents = ["arts", "leisure", "sports"];  

  React.useEffect(() => {
    firebase
      .database()
      .ref("events")
      .once("value")
      .then((snapshot) => {
        setEvents(snapshot.val());
      });
  });

  let dataJson = {};
  for (i = 0; i < testEvents.length; i++) {
    let genre = testEvents[i];
    dataJson.time = "09:00";
    dataJson.title = "Event" + i;
    dataJson.description = <Text>{events[genre][0].name} </Text>;  //cannot be evaluated as undefined
  }
  console.log(dataJson);

【问题讨论】：

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

【解决方案1】：

首先你不能在没有任何依赖的情况下执行useEffect，因为它在其中设置了一个状态，否则你的应用程序将进入无限循环

其次，你可以在实际使用解析的数据之前有一个加载状态

const Finalized = (props) => {
  const [events, setEvents] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(true);
  const testEvents = ["arts", "leisure", "sports"];  

  React.useEffect(() => {
    firebase
      .database()
      .ref("events")
      .once("value")
      .then((snapshot) => {
        setEvents(snapshot.val());
        setIsLoading(false);
      });
  }, []); // executed on initial render

  if(isLoading) {
     return <div>Loading...</div>
  }
  let dataJson = {};
  for (i = 0; i < testEvents.length; i++) {
    let genre = testEvents[i];
    dataJson.time = "09:00";
    dataJson.title = "Event" + i;
    dataJson.description = <Text>{events[genre][0].name} </Text>;  //cannot be evaluated as undefined
  }
  console.log(dataJson);

【讨论】：

@Shubham 非常感谢您的回答，尤其是第一点。我最初很困惑为什么在 .then 块中添加一个 console.log 会导致我的终端被输出淹没
很高兴能帮上忙 :-)

【解决方案2】：

您需要等待events 完成，您可以这样实现：

const Finalized = (props) => {
  const [events, setEvents] = React.useState([]);
  const testEvents = ["arts", "leisure", "sports"];  

  React.useEffect(() => {
    firebase
      .database()
      .ref("events")
      .once("value")
      .then((snapshot) => {
        setEvents(snapshot.val());
      });

    if (events.length) {
      // use you loop here
    }
  }, events.length);

  ...
}

【讨论】：