如何在第二次获取中使用第一次获取的数据?我在第一次搜索中未定义,然后就可以了,如何在第一次搜索中获取数据而不出现“未定义”?
const [summoner, setSummoner] = useState("");
const [playerData, setPlayerData] = useState({});
const [playerRank, setPlayerRank] = useState({});
function searchPlayer(event) {
axios.get("API1" + summoner + API_KEY).then(function (response) {
setPlayerData(response.data);
}).catch(function (error) {
console.log(error);
});
console.log(playerData.id);
axios.get("API2" + playerData.id + API_KEY).then(function (response) {
setPlayerRank(response.data)
}).catch(function (error) {
console.log(error);
});
}
这是我的控制台:
log: undefined
log: id
2条答案
按热度按时间0wi1tuuw1#
我建议你使用
useEffect
来处理react中的数据获取。不知道event
是做什么用的,但是看起来没有使用过,所以如果是这样的话,你可以做下面的事情:此设置将在
playerData
发生更改时触发getPlayerRank
函数。https://reactjs.org/docs/hooks-effect.html
zlhcx6iw2#
我相信在React JavaScript中,Axios会向服务器发出一个调用,然后继续,因此console.log函数会在收到服务器响应和回调运行之前被调用。您要么需要等待响应,要么更好的解决方案是将第二个API调用放在回调函数中。然后,它将拥有第二个API调用所需的数据。
如果你也在开发API,你可能会考虑在一次API调用中从服务器获取所有东西。这将涉及到服务器端的工作,我从你的帖子中不知道你是否有访问API端点代码的权限。我希望这能帮助你找到正确的方向。