Как использовать массив ключей для запроса нескольких документов в Firestore

Question

У меня есть веб-сайт, где пользователи могут проходить курсы.Когда пользователь запускает курс, я хочу добавить идентификатор курса в документ этого пользователя в firestore.На сайте у пользователя есть своя страница профиля.В одном из разделов есть раздел «Происходящие курсы», где пользователи могут видеть курс, в котором они зарегистрированы.

Я могу добавить ключ документа курса в поле в документе пользователя, как только они начнутся.Поле «Курс» представляет собой массив строк, содержащих ключи к документам в другой коллекции.

Проблема, с которой я столкнулся при попытке отобразить курсы, в которых пользователь в настоящее время зарегистрирован, в их профиле.

Я думаю, что проблема в том, что документы курса возвращаются после отображения экрана.

Я попытался использовать async и await, чтобы убедиться, что код сначала завершает цикл и получает весь документ курса, поэтомузатем можно отобразить их на экране, но это не работает.

Большое спасибо за любую помощь

getEnrolledCareersList = async () => {

  let careersEnrolled = [];
  let careersEnrolledTemp = [];
  let careersEnrolledDocumentKeys = ["84YU2pLABF6qUvUEuwIm", "kwBaAUwkjTutGTcIKShw"];

 await careersEnrolledDocumentKeys.forEach((documentKey) =>{

      console.log("documentKey: ", documentKey);

      db.collection("...")
          .where("courseDocumentKey", "==", documentKey)
          .get()
          .then(
              (querySnapshot) => {
                  if (querySnapshot.empty) {
                      // doc.data() will be undefined in this case
                      console.log("No such document!");
                      return;
                  }

                  querySnapshot.forEach((doc) => {
                      console.log("getEnrolledCareersList Document data:", doc.data());
                      const {
                          courseName,
                          courseId,
                          coursePhotoUrl,
                          courseDocumentKey,
                      } = doc.data();

                      careersEnrolledTemp.push({
                          courseName,
                          courseId,
                          coursePhotoUrl,
                          courseKey: courseDocumentKey,
                      });
                  });
              },
              function(error) {
                  console.log("Error getting document Error: ", error);
              },
          );

  });

Компонент JSX:

<div
          style={{
            // border: "solid #8492A6 5px",
            display: "flex",
            flexDirection: "column",
            //flexWrap: "wrap",
            justifyContent: "flex-start",
            padding: "0 0%",
          }}>

          {this.state.currentPaths.map((item, index) => (
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                padding: "1% 1%",
              }}>
              <img
                alt={"career image"}
                src={item.coursePhotoUrl}
              />
              <div
                style={{
                    // border:"solid red 1px",
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "space-evenly",
                  padding: "0 2%",
                }}>

                  {/*Career Name Label*/}
                <label
                  style={{
                    // border: "solid  #8492A6",
                    textAlign: "center",
                  }}>
                  {item.courseName}
                </label>

                  {/*Career Percentage Completed Label*/}
                <label
                  style={{
                    // border: "solid  #8492A6",
                    textAlign: "center",
                  }}>
                  Percentage
                </label>
              </div>
            </div>
          ))}
        </div>

Answer 1

Я закончил этим, и это решило мою проблему. Подруга помогла мне получить это, а также @Doug Stevenson большое спасибо.

getCourse = id => db.collection("abc")
    .doc(id)
    .get();

getEnrolledCareersList = async (courseIds = ["1", "2"]) => {
  const requests = courseIds.map(this.getCourse);
  const responses = await Promise.all(requests);
  const enrolledCourses = responses.map(doc => doc.data());
  this.setState({
      ...this.state,
      enrolledCourses,
  });
};