検索バーのオートコンプリート オプションに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}
})
}