javascript - 如何将firebase返回的数据保存到变量

Question

我正在为我的 React Native 应用程序编码，但无法从 firebase.firestore().collection("test_data").doc(ID) 之外的 firebase 返回数据环形。每当我在循环后检查 dataArray 变量时，它都是空的。如果我在循环内检查它，数据就在那里。我认为这是一个范围问题，但我只是不明白。我也无法在循环内调用任何用户定义的函数。

    try {
      let dataArray = [];
      // get the document using the user's uid
      firebase.firestore().collection("users").doc(uid).get()
      .then((userDoc) =>{
        // if the document exists loop through the results
        if (userDoc.exists) {
          data = userDoc.data().saved_data; // an array store in firebase

          data.forEach(ID => { // loop through array

            firebase.firestore().collection("test_data").doc(ID).get()
            .then((doc) => {
              dataArray.push(doc.data().test_data);
              console.log(dataArray) // the data shows
            })
              console.log(dataArray) // the data does not show
          })

        }
      })
    } 
    catch (error) {

    }
  }

Answer 1

您正在循环异步调用，因此最终的 console.log 将在收到数据之前触发。您的第一个 console.log 仅在收到数据后才会触发。

因此，代码可以正常工作，但在从 Firebase 调用收到所有数据之前，函数( promise )将解析(未定义或无效)。

如果你想返回数组给调用者，你可以这样做:

function getDataFromServer() {
  // get the document using the user's uid
  return firebase.firestore().collection('users').doc(uid).get().then(userDoc => {
    // now we're returning this promise

    const dataArray = []; // can move this to lower scope
    // if the document exists loop through the results

    if (userDoc.exists) {
      const savedData = userDoc.data().saved_data; // an array store in firebase

      return Promise.all(
        // wait for all the data to come in using Promise.all and map
        savedData.map(ID => {
          // this will create an array
          return firebase.firestore().collection('test_data').doc(ID).get().then(doc => {
            // each index in the array is a promise
            dataArray.push(doc.data().test_data);
            console.log(dataArray); // the data shows
          });
        })
      ).then(() => {
        console.log(dataArray);
        return dataArray; // now data array gets returned to the caller
      });
    }

    return dataArray; // will always be the original empty array
  });
}

现在该函数返回一个数组的 promise ，所以你可以......

const dataArray = wait getDataFromServer()

或

getDataArrayFromServer().then(dataArray => {...})