为图表反应 UseEffect 数据数组
React UseEffect data array for charts
我想用 recharts 来自 wins
的团队构建一个图表,我 select 从下拉列表中选择。
我正在使用 https://www.api-football.com/ 从我要选择的日期获取 wins
和 matchs
号码。
图表中使用的 data
数组必须采用以下格式,包含这些对象。
day: matchs played
Team: number of victories
例子
Data: [
{day:16, Sao Paulo:4},
{day:22, Sao Paulo:4},
{day:27, Sao Paulo:7}
],
这里是相关代码。
这是我的 getTeamStats
电话,我 Promise.all
处理来自日期的请求。
这是一个例子,当我 select Sao Paulo
主队时,我向这些端点发送 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);
});
};
}
我调度包含 matchs played
和 wins
的 teamStats
对象。
dispatch(receivedTeamsStat(teamStats, type, name))
在我的组件中,这就是我尝试创建 data
数组的方式
const [data, setData] = useState([]);
useEffect(() => {
setData([...data, 'Day:' + home.matchsPlayed, selectedHomeName + ':' + home.totalCal]);
},[home.matchsPlayed, home.totalCal, selectedHomeName]);
console.log('data', [data]);
这是我 select 圣保罗
时的数据
我的难题是如何将 team
selected、wins
、matchs
作为 3 个对象而不是一个对象推送到数据数组中像现在这样吗?我希望我的数据看起来像我在问题顶部所说的那样。
Data: [
{day:16, Sao Paulo:4},
{day:22, Sao Paulo:4},
{day:27, Sao Paulo:7}
],
我在这里重现了案例=> https://codesandbox.io/s/cool-wind-sism9
(为了观看演示,必须安装 chrome 解锁 CORS 的扩展,我使用 CORS Unblock)
一道题代码比较多,我没有深究,只关注如何将数据设置为你要求的正确数据结构。
为此,您可能需要在 Details.js
的第 57
行更改 useEffect
:
useEffect(() => {
setData(prev =>
prev.concat([
{
day: home.matchsPlayed,
[selectedHomeName]: home.winHome
}
])
);
}, [home.matchsPlayed, home.winHome, selectedHomeName]);
我想用 recharts 来自 wins
的团队构建一个图表,我 select 从下拉列表中选择。
我正在使用 https://www.api-football.com/ 从我要选择的日期获取 wins
和 matchs
号码。
图表中使用的 data
数组必须采用以下格式,包含这些对象。
day: matchs played
Team: number of victories
例子
Data: [
{day:16, Sao Paulo:4},
{day:22, Sao Paulo:4},
{day:27, Sao Paulo:7}
],
这里是相关代码。
这是我的 getTeamStats
电话,我 Promise.all
处理来自日期的请求。
这是一个例子,当我 select Sao Paulo
主队时,我向这些端点发送 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);
});
};
}
我调度包含 matchs played
和 wins
的 teamStats
对象。
dispatch(receivedTeamsStat(teamStats, type, name))
在我的组件中,这就是我尝试创建 data
数组的方式
const [data, setData] = useState([]);
useEffect(() => {
setData([...data, 'Day:' + home.matchsPlayed, selectedHomeName + ':' + home.totalCal]);
},[home.matchsPlayed, home.totalCal, selectedHomeName]);
console.log('data', [data]);
这是我 select 圣保罗
时的数据我的难题是如何将 team
selected、wins
、matchs
作为 3 个对象而不是一个对象推送到数据数组中像现在这样吗?我希望我的数据看起来像我在问题顶部所说的那样。
Data: [
{day:16, Sao Paulo:4},
{day:22, Sao Paulo:4},
{day:27, Sao Paulo:7}
],
我在这里重现了案例=> https://codesandbox.io/s/cool-wind-sism9 (为了观看演示,必须安装 chrome 解锁 CORS 的扩展,我使用 CORS Unblock)
一道题代码比较多,我没有深究,只关注如何将数据设置为你要求的正确数据结构。
为此,您可能需要在 Details.js
的第 57
行更改 useEffect
:
useEffect(() => {
setData(prev =>
prev.concat([
{
day: home.matchsPlayed,
[selectedHomeName]: home.winHome
}
])
);
}, [home.matchsPlayed, home.winHome, selectedHomeName]);