Javascript 图表的React UseEffect数据数组
我想用我从下拉列表中选择的团队的胜利来构建一个图表 我正在使用从我想要选择的日期开始获取赢家和比赛号码 图表中使用的数据数组必须采用以下格式,并包含这些对象Javascript 图表的React UseEffect数据数组,javascript,reactjs,redux,use-effect,recharts,Javascript,Reactjs,Redux,Use Effect,Recharts,我想用我从下拉列表中选择的团队的胜利来构建一个图表 我正在使用从我想要选择的日期开始获取赢家和比赛号码 图表中使用的数据数组必须采用以下格式,并包含这些对象 day: matchs played Team: number of victories 范例 这里是相关的代码 这是我的getTeamStats调用,我做了一个承诺。所有处理来自日期的请求。 这里是一个例子,当我选择圣保罗主队时,我向这些端点发送了3个请求 https://www.api-football.com/demo/v2/sta
day: matchs played
Team: number of victories
范例
这里是相关的代码
这是我的getTeamStats调用,我做了一个承诺。所有处理来自日期的请求。
这里是一个例子,当我选择圣保罗主队时,我向这些端点发送了3个请求
https://www.api-football.com/demo/v2/statistics/357/19/2019-08-30
https://www.api-football.com/demo/v2/statistics/357/19/2019-09-30
https://www.api-football.com/demo/v2/statistics/357/19/2019-10-30
export function getTeamsStats(league, team, type, name) {
return function(dispatch) {
const url = "https://www.api-football.com/demo/v2/statistics";
let dates = ["2019-08-30", "2019-09-30", "2019-10-30"];
const getAllData = (dates, i) => {
return Promise.all(
dates.map(x => url + "/" + league + "/" + team + "/" + x).map(fetchData)
);
};
const fetchData = URL => {
return axios
.get(URL)
.then(res => {
const {
matchsPlayed: { total: teamsTotalMatchsPlayed },
wins: { home: teamsStatsWinHome }
} = res.data.api.statistics.matchs;
const matchsPlayed = teamsTotalMatchsPlayed;
const winHome = teamsStatsWinHome;
const teamStats = {
matchsPlayed,
winHome
};
dispatch(receivedTeamsStat(teamStats, type, name));
})
.catch(e => {
console.log(e);
});
};
getAllData(dates)
.then(resp => {
console.log(resp);
})
.catch(e => {
console.log(e);
});
};
}
我发送包含比赛和胜利的teamStats对象
在我的组件中,这就是我尝试创建数据数组的方式
这就是我选择圣保罗时数据的外观
我的难题是,我如何才能将团队选择的数据阵列、胜利、比赛作为3个对象,而不是像现在这样只有一个对象?我希望我的数据看起来像我在问题顶部说的那样
Data: [
{day:16, Sao Paulo:4},
{day:22, Sao Paulo:4},
{day:27, Sao Paulo:7}
],
我在这里复制了这个案例=>
为了观看演示,必须安装一个chrome扩展来解锁CORS,我使用CORS unblock一个问题有很多代码,我没有深入探讨,我只关注如何将数据设置为您要求的正确数据结构 为此,您可能需要在Details.js的第57行更改useEffect: useEffect=>{ setDataprev=> 上鼻甲[ { 日期:home.matchsPlayed, [selectedHomeName]:home.winHome } ] ; },[home.matchsPlayed,home.winHome,selectedHomeName];
dispatch(receivedTeamsStat(teamStats, type, name))
const [data, setData] = useState([]);
useEffect(() => {
setData([...data, 'Day:' + home.matchsPlayed, selectedHomeName + ':' + home.totalCal]);
},[home.matchsPlayed, home.totalCal, selectedHomeName]);
console.log('data', [data]);
Data: [
{day:16, Sao Paulo:4},
{day:22, Sao Paulo:4},
{day:27, Sao Paulo:7}
],