Promise.all引发TypeError：undefined不是函数

Question

I'm returning a list of promises from a function, and I need to get the values of that array. Therefore, I'm using the Promise.all function. But this doesn't work very well for me. I'm getting this error:

Uncaught (in promise) TypeError: undefined is not a function
    at Function.all (<anonymous>)
    at new MySearchesTable (my-searches-table.js:162)
    at constructClassInstance (react-dom.development.js:6801)

Here's where the error originates from.

class MySearchesTable extends React.Component {
  constructor(props, context) {
      super(props, context);
      let data = Promise.all(modelInstance.getSearchHistory()); // Error traceback starts here!
      this.state = {
        selected: [],
        data: data,
        page: 0,
        rowsPerPage: 5,
        open: false,
      };

And here's the function that returns a list of promises:

  /*
  * Gets searches for logged in user
  */
  this.getSearchHistory = function(){

    let currUserSearches;
    return new Promise((resolve, reject)=>{
      firebase.auth().onAuthStateChanged(function(user){
      if(user){
        let uid = user.uid;

        let userRef = database.ref("users/"+uid);

        return userRef.once("value")
        .then( (value) => {
          let currUserSearchesIDs = value.val();
          console.log("currUserSearches:");
          let currUserSearches = currUserSearchesIDs.map( searchID => {
            return database.ref("searches/"+searchID).once("value")
                .then( (value) => {
                  let obj = value.val();
                  obj["id"] = searchID;
                  return obj;
                });
          });
          console.log(currUserSearches);
          resolve(currUserSearches);
        });
      }else{
        reject("Must log in"); // user must log in
      }
      }
    )
    });

  }

What is the reason for this error? How can I successfully get a list of the values I have in my database?

Answer 1

The reason is that Promise.all expects an iterable . You are only returning 1 promise .

Look:

In the above example I'm using Promise.all and passing a single Promise to it. The result of Promise.resolve(null) is 1 promise that resolves to null.

The error doesn't occur when you pass an array of Promise like:

Promise.all([Promise.resolve(null)])

That being said, I must point out that you should reconsider your design, because you are not supposed to wait on promises on the constructor. Use componentDidMount for that. The first render of your component should have data as null, and eventually display a loading indicator. On componentDidMount , trigger the data fetching part. Once the data is returned, re-render your component, now with the data already fetched.