7

検索バーのオートコンプリート オプションにreact-selectを使用しています。検索バーには、ヒットした API エンドポイントに応じて、2 つのカテゴリのいずれかに結果が表示されます。

現在、いずれかのポイントからのデータで動作しますが、両方のエンドポイントからのデータを react-select のloadOptionsパラメーターに返すのに問題があります。

複数の API 呼び出しに関するこの回答から、promise を使用してすべてのデータを一度に返すことにしましたが、エラーが発生しますUncaught TypeError: promise.then is not a function at Async.loadOptions

これが私のコードです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}
    })
}
4

2 に答える 2