Promesse.n'est pas une fonction de traitement de plusieurs appels d'API de Réagir

Je suis en utilisant réagir-sélectionnez à l'auto-complétion des options dans une barre de recherche. La barre de recherche affiche les résultats dans une des deux catégories, en fonction de l'API de point de terminaison, il frappe.

Pour l'instant, elle fonctionne avec des données à partir d'un point ou l'autre, mais je vais avoir du mal à revenir de données à partir de deux points de terminaison de réagir-sélectionnez la loadOptions paramètre.

De cette réponse sur plusieurs appels d'API, j'ai décidé d'utiliser promet de revenir toutes les données à la fois, mais je reçois l'erreur Uncaught TypeError: promise.then is not a function at Async.loadOptions

Voici mon code pour loadOptions:

const getAsync = (tripId, destinationIndex, input) => {
  if (!input) {
    return { options: [] }
  }

  function getMusement(input) {
    return new Promise(function(resolve, reject) {
      TVApi.musement.autocomplete(input)
        .then((m) => {
          const musementOptions = m.map(musementToOption).slice(0, 4)
          return resolve(musementOptions)
        })
    })
  }

  function getFourSquare(tripId, destinationIndex, input) {
    return new Promise(function(resolve, reject) {
      TVApi.spot.autocomplete(tripId, destinationIndex, input)
        .then((fs) => {
          const fsOptions = fs.map(spotToOption).slice(0, 4)
          return resolve(fsOptions)
        })
    })
  }

  return Promise.all([getMusement(input), getFourSquare(tripId, destinationIndex, input)])
    .then((allData) => {
      const merged = [].concat.apply([], allData)
      console.log(JSON.stringify(merged)) //logs out with correct data
      return {options: merged}
    })
}
Éviter les Promise constructeur antipattern!
ne TVApi.musement.la saisie semi-automatique renvoie une promesse?
En ligne en particulier? Êtes-vous sûr que le TVApi méthodes ne renvoient toujours des promesses?
Comment ferais-je sans elle?
Vous devriez juste écrire function getMusement(input) { return TVApi.musement.autocomplete(input).then(m => { … return musementOptions }) } (et de même pour getFourSquare)

OriginalL'auteur crash springfield | 2017-05-11

  1. 5

    Votre problème, c'est que getAsync ne pas toujours retour d'une promesse, vous ne pouviez pas de la chaîne .then(…) à chaque appel. Quand il n'y a pas d'entrée, vous avez été de retourner un objet ordinaire - au lieu de cela vous avez besoin de retourner une promesse qui est résolu avec cet objet:

    if (!input) {
   return Promise.resolve({ options: [] });
}
    Pour une raison quelconque, cela ne fonctionne pas, mais il pourrait avoir à faire avec la réaction sélectionnez la bibliothèque. Si la déclaration est tout simplement la barre de recherche donner. En arrière quand il faisait juste un appel de l'API (à l'aide d'un rappel) la barre de recherche serait toujours répondre à de nouvelles entrées. Maintenant, il ne répond pas.
    J'ai pensé auparavant, il lancerait une erreur? Maintenant au moins, il ne le fait pas 🙂 vous ne savez Pas comment vous l'utilisez, et pourquoi la résolution de la promesse de l'empêcher de chercher plus loin, mais vous devriez vous poser une question distincte avec le code sur ce problème.

    OriginalL'auteur Bergi

  2. 1

    Il s'avère donc si l'instruction a été la cause de l'erreur: 

    if (!input) {
  return {options: []}
}

    mais je n'ai aucune idée de pourquoi cela serait. Si quelqu'un pouvait expliquer pourquoi, ce serait bon à savoir pour les prochains numéros.

    Voici la solution que j'ai obtenu en suivant @Bergi conseils en évitant les Promise Constructor antipattern

    const loadOptions = (tripId, destinationIndex, input) => {

  function getMusement(input) {
    return TVApi.musement.autocomplete(input)
      .then((m) => {
        const musementOptions = m.map(musementToOption).slice(0, 3)
        return musementOptions
      })
  }

  function getFourSquare(tripId, destinationIndex, input) {
    return TVApi.spot.autocomplete(tripId, destinationIndex, input)
      .then((fs) => {
        const fsOptions = fs.map(fsToOption).slice(0, 2)
        return fsOptions
      })
  }

  return Promise.all([getMusement(input), getFourSquare(tripId, destinationIndex, input)])
    .then((allData) => {
      const merged = [].concat.apply([], allData)
      return {options: merged}
    })
}
    Merci pour l'astuce, voir ma réponse pour expliquer pourquoi c'est le problème et comment le résoudre

    OriginalL'auteur crash springfield