问题简介:
在我的React应用程序中,我正在向Github进行一些API调用以获取一些用户数据。在另一个函数中,我调用这些函数并使用Axios的.all()
方法等待它。
我想使用.then()
获取数据并使用它执行某些操作,但返回的值只是一个未定义2次的数组
预期会发生什么:
它应该在对象的profile
键中返回2个带有配置文件信息的播放器对象,并在对象的score
键中返回一个得分值。
我的应用程序简单地做了什么?
它从2个用户名中获取数据,并且可以相互“战斗”。它只是取得分数和追随者并返回一笔金额。最后,它(应该)返回一个数组,其中包含2个玩家对象,这些对象已经与获胜者排在第一位(exampleArray[0]
)。
一般信息 这是一个使用组件的反应应用程序。它实际上是关于一个非常小的组件,辅助函数在另一个文件中。
这是我调用自定义函数(返回undefined的函数)的地方:
componentDidMount() {
const players = queryString.parse(this.props.location.search); //<== the usernames
const playersArray = [players.playerOneName, players.playerTwoName];
console.log(playersArray); // <== this logs the output as expected (an array with 2 usernames)
battle(playersArray).then((data) => { // <== the function it's all about
console.log(data); // <== data is => [undefined, undefined];
})
}
接下来是上面的战斗功能,它使用了另外两个功能:
战
export function battle(players) { // <== players aray with 2 usernames as string
return axios.all(players.map(getUserData)) // <== look 1 function below
.then(sortPlayers) // <== two functions below
.catch(handleError)
}
getUserData
let getUserData = (player) => {
axios.all([
getProfile(player),
getRepos(player)
]).then((data) => {
return {
profile: data[0],
score: calculateScore(data[0], data[1])
}
})
}
sortPlayers
let sortPlayers = (players) => {
return players.sort((a, b) => {
return b.score - a.score;
})
}
好的,所以他们也使用其他功能,但它们真的不太复杂。当你需要其他小帮手的例子时,请告诉我。
我尝试将调试器放在代码中的不同位置,并且控制台记录了不同的东西,但我无法通过(第一次我真正使用promises)。现在坐在这个小问题面前2个小时,我无法弄明白。
我认为问题在于战斗功能本身或getUserData
最后一个小截图,我的console.log的输出看起来是什么:http://prntscr.com/hz5abq
提前致谢
答案 0 :(得分:1)
getUserData需要返回它创建的promise。目前它没有返回任何内容,因此返回一个隐式的undefined,因此players.map(getUserData)
会生成一个[undefined, undefined]
的数组
即,这样做:
let getUserData = (player) => {
// VVV added return statement
return axios.all([
getProfile(player),
getRepos(player)
]).then((data) => {
return {
profile: data[0],
score: calculateScore(data[0], data[1])
}
})
}
答案 1 :(得分:1)
getUserData中没有返回任何内容。添加return
或删除{}
包裹axios.all
let getUserData = (player) => {
return axios.all([
getProfile(player),
getRepos(player)
]).then((data) => {
return {
profile: data[0],
score: calculateScore(data[0], data[1])
}
})
}