ReactJS设置state数组后元素undefined问题求助

嘿，我一眼就看出你碰到的问题了——这是异步操作顺序不当导致的！

为什么会报错？ #

你在course.data().sections.map里发起了多个Firebase文档请求，但这些请求都是异步的，意味着它们不会立刻返回结果。而你在map循环结束后马上就调用this.setState({sections:activities})，这时候activities数组其实还是空的（因为所有异步请求都还没完成，还没往数组里push数据）。所以当你在setState的回调里尝试访问this.state.sections[0].title时，sections[0]是undefined，自然会抛出错误。

修复方案：用Promise.all等待所有异步请求完成 #

我们需要等待所有Firebase的文档请求都完成后，再去设置state。这里可以用Promise.all来处理多个并行的异步操作，它会等到所有Promise都resolved之后，再返回所有结果的数组。

修改后的代码如下：

// Load the course template
this.props.firebase
.course(authUser.courseId)
.get()
.then((course) => {
  if (course.exists) {
    console.log("Course data:", course.data());
    this.setState({shortCode: course.data().shortCode});
    this.setState({title: course.data().title},()=>{
      // 收集所有异步请求的Promise
      const activityPromises = course.data().sections.map(sect=>{
        return this.props.firebase.getDocByIdFrom("courseActivities",sect.id)
        .get()
        .then((activity)=>{
          return activity.data(); // 直接返回数据，Promise.all会收集这些结果
        })
        .catch(error => {
          console.log("Error fetching activity:", error);
          return null; // 出错时返回null，避免整个Promise.all失败
        });
      });

      // 等待所有异步请求完成
      Promise.all(activityPromises)
        .then(activities => {
          // 过滤掉请求失败返回的null
          const validActivities = activities.filter(act => act !== null);
          this.setState({sections: validActivities},()=>{
            console.log("SECTIONS ",this.state.sections);
            // 先判断数组是否有元素，再访问
            if (this.state.sections.length > 0) {
              console.log("SECTION 0 "+this.state.sections[0].title);
            } else {
              console.log("No valid sections were fetched.");
            }
          });
        })
        .catch(error => {
          console.log("Error processing activities:", error);
        });
    });
  } else {
    // doc.data() will be undefined in this case
    console.log("No such course!");
  }
})
.catch(error => {
  console.log(error);
});

关键改进点： #

• 把每个Firebase请求都包装成Promise并收集到数组中，用Promise.all等待所有请求完成
• 在Promise.all的回调里再处理返回的所有活动数据，过滤掉可能的错误结果
• 设置state之前确保数据已经全部获取，这时候访问sections[0]就不会出错了
• 增加了数组长度判断，避免即使请求完成但没有数据时再次报错

内容的提问来源于stack exchange，提问作者Zach