我正在使用 react-select在搜索栏中自动完成选项。搜索栏显示两个类别之一的结果,具体取决于它命中的 API 端点。
现在,它可以处理来自一个点或另一个点的数据,但我无法将两个端点的数据返回到 react-select 的 loadOptions
参数。
来自 this answer关于多个 API 调用,我决定使用 promises 一次返回所有数据,但我收到错误 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}
})
}
最佳答案
您的问题是 getAsync
并不总是返回 promise ,因此您无法将 .then(...)
链接到每个调用。当没有输入时,您将返回一个普通对象 - 相反,您需要返回一个由该对象解析的 promise :
if (!input) {
return Promise.resolve({ options: [] });
}
关于javascript - Promise.then 不是函数 - 在 React 中处理多个 API 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43917022/