Question

我试图在导航到另一个屏幕之前预取多张图像，但返回的学生都不确定。

prepareStudentImages = async (students) => {
    let returnedStudents = students.map(student => {
        Image.prefetch(student.image)
        .then((data) => {
            ...
        })
        .catch((data) => {
            ...
        })
        .finally(() => {
            return student;
        });
    });

    await console.log(returnedStudents); // ----> all items undefined
}

Answer 1

有几件事需要解决：

1）您的map()函数不返回任何内容。这就是您的控制台日志为undefined的原因。

2）地图功能正常工作后，您便在记录一系列的诺言。要处理多个promise（一个数组），可以使用Promise.all()。

所以我想解决这个问题，您可以这样做：

prepareStudentImages = async (students) => {
  const returnedStudents = students.map(student => 
    Image.prefetch(student.image)
      .then((data) => {
          ...
      })
      .catch((data) => {
          ...
      })
      .finally(() => {
          return student
      })
  )

  console.log(returnedStudents) // log the promise array

  const result = await Promise.all(returnedStudents) // wait until all asyncs are complete
  console.log(result) // log the results of each promise in an array

  return result
}

React Native等待所有图像预取完成

1 个答案: