[英]Why does my API call function return an undefined object?
我在 ReactJS 中有這個組件,它在英雄聯盟(視頻游戲)中進行 API 調用。 我正在嘗試繪制用戶“過去 20 場比賽中使用次數最多的冠軍”的圖表。 但是,我需要檢索所有英雄 ID 和英雄名稱的對象。 這個問題發生在matchHeroes(championObj, ChampionList)函數中 - 第 76 行
在 Chrome 開發人員工具中,我在第 77 行https://i.stack.imgur.com/wGlcH.jpg 中得到一個來自 ChartData.js 的對象
該對象將冠軍 Id 顯示為鍵,將冠軍名稱顯示為值https://i.stack.imgur.com/aenCM.jpg
當我嘗試 console.log(championObj[876]) 時,它應該打印“Lillia”,但它打印未定義的https://i.stack.imgur.com/Nb5Av.jpg
import React, { Component } from 'react'
import { Bar
// ,Line
// ,Pie
} from 'react-chartjs-2'
class ChartData extends Component {
constructor(props) {
super(props)
this.state = {
error: null,
isLoaded: false,
accountId: props.accountId,
matchHistory: [],
chartData: {},
championLibrary: {},
championList:[]
}
}
componentDidMount = () => {
this.getMatchHistory();
}
getMatchHistory = () => {
let championList = [];
const proxyurl = "https://mysterious-wave-96239.herokuapp.com/";
const url = "https://na1.api.riotgames.com/lol/match/v4/matchlists/by-account/" + this.state.accountId + "?endIndex=20&api_key=" +process.env.REACT_APP_SECRET_KEY;
fetch(proxyurl + url)
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
matchHistory: Object.entries(result.matches).map(([x,championId]) => {
return championList.push(championId.champion.toString())
})
},
this.getHeroJson(championList)
)
this.setState({
championList: championList
})
},
(error) => {
this.setState({
isLoaded: true,
error: {
message: "Error - Something went wrong!"
}
});
}
)
}
getHeroJson = (championList) => {
let championObj = {}
const proxyurl = "https://mysterious-wave-96239.herokuapp.com/";
const url = "https://ddragon.leagueoflegends.com/cdn/10.15.1/data/en_US/champion.json";
fetch(proxyurl + url)
.then(response => response.json())
.then(contents => {
Object.entries(contents.data).map(([key, value]) =>
championObj[value.key] = [value.name].toString()
)
})
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))
this.setState({
championLibrary: championObj
})
// console.log(this.state.championLibrary)
this.matchHeroes(championObj, championList)
}
matchHeroes = (championObj, championList) => {
console.log(championObj)
console.log(championObj[876])
Object.entries(championObj).map(([name, loader])=> {
console.log(name, loader)
})
this.getChartData();
}
getChartData = () => {
let championCount = {
'Zed': 8,
'Akali': 2,
'Nunu' : 4,
'Luxe' : 4,
'Amumu': 1,
'Fiona': 1,
'Yassuo': 3,
}
this.setState({
chartData:{
labels: Object.keys(championCount),
datasets:[
{
label:'Population',
data: Object.values(championCount),
backgroundColor:[
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 99, 132, 0.6)'
]
}
]
}
});
}
static defaultProps = {
displayTitle: true,
displayLegends: true,
legendPosition: 'right'
}
render () {
return (
<div className="chart">
<Bar
data={this.state.chartData}
options={{
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display: this.props.displayTitle,
text: "Most played champions in 20 games",
fontSize: 25
},
legend: {
display: this.props.displayLegend,
position: this.props.legendPosition
}
}}
/>
</div>
)
}
}
export default ChartData
這是工作代碼發送框,在異步調用完成之前調用該函數存在錯誤。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.