【问题标题】:Dynamically consume a different data object depending on the option selected根据所选选项动态使用不同的数据对象
【发布时间】:2020-02-18 11:54:07
【问题描述】:

我有一个包含 2 个数组的数据对象(团队名称列表)

const data = {
  Liga: ['Alaves','Atletico', 'Barcelona', 'Betis'],
  Premier: ["Arsenal", "Chelsea", "Everton", 'Liverpool']
};

根据我选择的值(Liga 或 Premier),我会得到我的球队名单。

这些团队有两个不同的数据得分结果scoresligascorespremier

const scoresliga = [
  { day: '0', Alaves: -6, Atletico: -1, Barcelona: -2, Betis: -6},
  { day: '1', Alaves: -7, Atletico: 1, Barcelona: -2, Betis: -6}
];

const scorespremier = [
  { day: '0', Arsenal: -6, Chelsea: -1, Everton: -2, Liverpool: -6},
  { day: '1', Arsenal: -7, Chelsea: 1, Everton: -2, Betis: -6}
];

我的问题是我必须找到一种方法,当我选择“Liga”时,我必须使用 scoresliga 对象,如果我选择“Premier”,我必须使用 scorespremier

这也将解决我在计算目前它不是一般功能的团队的平均值时遇到的问题。

这是使用 scoresliga 数据对象的函数的 sn-p,但它需要是 Ligas(Premier 和 Liga)的共享函数。

const getAverage = team => {

  if (isNaN(scoresliga[0][team])) return null;

  return scoresliga.map(x => x[team]).reduce((a, c) => a + c) / scoresliga.length;
};

我已经复制了我的案例,看看here

【问题讨论】:

    标签: javascript arrays reactjs object codesandbox


    【解决方案1】:

    只需向 getAverage 添加其他属性

    const getAverage = (league, team) => {
    
      if (isNaN(league[0][team])) return null;
    
      return league.map(x => x[team]).reduce((a, c) => a + c) / 
         league.length;
    };
    

    还要在分数中创建一些映射

    const scores = {
      Liga: [
        { day: "0", Alaves: -6, Atletico: -1, Barcelona: -2, Betis: -6 },
        { day: "1", Alaves: -7, Atletico: 1, Barcelona: -2, Betis: -6 }
      ],
      Premier: [
        { day: "0", Arsenal: -6, Chelsea: -1, Everton: -2, Liverpool: -6 },
        { day: "1", Arsenal: -7, Chelsea: 1, Everton: -2, Betis: -6 }
      ]
    };
    

    在 Chart.js 中

    <span>{getAverage(scores[this.state.selectedLeague], this.state.selectedTeam)}</span>
    

    另外,更新

    handleLeagueChange = event => {
        const selectedLeague = event.target.value;
        this.setState({ selectedLeague: selectedLeague }, () => {
          this.setState({ selectedTeam: data[selectedLeague][0] });
        });
      };
    

    【讨论】:

    【解决方案2】:

    我建议你在数组中添加一个键 championShip

    const scoresliga = [
      { day: '0', championShip: 'Liga', Alaves: -6, Atletico: -1, Barcelona: -2, Betis: -6},
      { day: '1', championShip: 'Liga', Alaves: -7, Atletico: 1, Barcelona: -2, Betis: -6, championShip: 'Liga'}
    ];
    
    const scorespremier = [
      { day: '0', championShip: 'Premier',  Arsenal: -6, Chelsea: -1, Everton: -2, Liverpool: -6},
      { day: '1', championShip: 'Premier', Arsenal: -7, Chelsea: 1, Everton: -2, Betis: -6},
      { day: '1', championShip: 'Premier', Chelsea: 1, Everton: -2, Betis: -6}
    ];
    

    那么你的数组会更容易操作,你可以拥有一个数组:

    let merged = scoresliga.concat(scorespremier);
    
    let desiredTeam = 'Arsenal';
    const filteredByTeam = merged.filter(f=> f.championShip === 'Premier' && f[desiredTeam]);
    const averageByTeamQuantity = filteredByTeam.reduce((a,c) =>{
      a += +c[desiredTeam];
      return a;
    }, 0)/ filteredByTeam.length;
    
    
    console.log(averageByTeamQuantity);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-09-25
      • 1970-01-01
      • 1970-01-01
      • 2019-01-04
      • 2011-12-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多