为什么我从我的 Axios 调用中返回 "undefined"，而它应该 return 我反对？

Question

问题介绍：

在我的 React 应用程序中，我正在对 Github 进行一些 API 调用以获取一些用户数据。在另一个函数中，我调用这些函数并使用 Axios 的 .all() 方法等待它。

我想获取数据并使用 .then() 对其进行处理，但 returned 值只是一个数组，有 2 次未定义

预期会发生什么：

它应该 return 我 2 个玩家对象，在对象的 profile 键中有个人资料信息，在对象的 score 键中有得分值。

简而言之，我的应用程序在做什么？

它从 2 个用户名中获取数据，它们可以 "battle" 彼此。它只是获取分数和关注者以及 return 的总和。最后，它（应该）return 是一个包含 2 个玩家对象的数组，其中获胜者排在第一位 (exampleArray[0])。

一般信息 这是一个使用组件的反应应用程序。它实际上是关于一个非常小的组件和另一个文件中的辅助函数。

这里是我调用自定义函数的地方（return未定义）：

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])
    }
})
}

排序玩家

let sortPlayers = (players) => {

return players.sort((a, b) => {
    return b.score - a.score;
})
}

好的，所以他们也使用其他功能，但实际上并不太复杂。当您还需要其他小帮手的示例时，请告诉我。

我尝试将调试器放在代码的不同位置，控制台记录了不同的内容，但我无法通过（我第一次真正使用 promises）。现在在这个小问题面前坐了 2 个小时，我无法弄清楚。

我认为问题出在战斗功能本身或getUserData

最后是一张小截图，我的 console.log 的输出是这样的：http://prntscr.com/hz5abq

提前致谢

Answer 1

getUserData 需要 return 它创建的承诺。目前它没有 returning 任何东西，所以隐含的未定义是 returned，因此 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])
        }
    })
}

Answer 2

您在 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])
        }
    })

}

为什么我从我的 Axios 调用中返回 "undefined"，而它应该 return 我反对？

Why am I getting back "undefined" from my Axios call, when it should return me objects?

javascript

promise

reactjs

axios