时间戳

首页 > 解决方案 > 用于图表的 React UseEffect 数据数组

javascript - 用于图表的 React UseEffect 数据数组

问题描述

我想建立一个图表，其中包含wins我从下拉列表中选择的团队的图表。

我正在使用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处理日期中的请求。这是一个示例，当我选择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);
      });
  };
}

我调度teamStats包含matchs playedand的对象wins。

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

这就是我选择圣保罗时数据的样子

控制台日志

我的挣扎是如何将team选定的数据数组推入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）

标签： javascriptreactjsreduxuse-effectrecharts

解决方案

一个问题有很多代码，我没有深入研究，我只关注如何将数据设置为您要求的正确数据结构。

为此，您可能需要useEffect在以下行57进行更改Details.js：

useEffect(() => {
  setData(prev =>
    prev.concat([
      {
        day: home.matchsPlayed,
        [selectedHomeName]: home.winHome
      }
    ])
  );
}, [home.matchsPlayed, home.winHome, selectedHomeName]);

推荐阅读