Javascript 在呈现数据之前，如何编辑或操作在我的状态下获取的数据

我正在使用react和redux构建一个应用程序

导航到新url后，将进行API调用，并且数据现在存在于容器状态中

我想做的是在子组件（FixtureList）中使用API数据之前我想重构数据。我在哪里做，如何做？下面是一个数据示例：

从数据示例中，您可以看到我们有一个名为matchday的键我想按比赛日将所有对象分组，然后渲染到前端

反应容器

import React, { Component } from 'react';
import { connect } from 'react-redux';

import FixtureList from '../components/league-fixture-list';


class LeagueFixtures extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-12">
            <h2>Fixtures</h2>
          </div>
        </div>
        <div className="row">
          {this.props.leagueFixtures.fixtures.map((fixture, index) => {
            return <FixtureList fixture={fixture} matchday={fixture.matchday} key={index}/> 
          })}
        </div>
      </div>
    )
  }
}  
const mapStateToProps = (state) => ({
  leagueFixtures: state.LeagueFixtures
})

const mapDispatchToProps = (dispatch) => {
  return {
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LeagueFixtures)

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../components/league fixture list”导入FixtureList；
类LeagueFixtures扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
固定设施
{this.props.leaguefights.fixtures.map（（fixture，index）=>{
返回
})}
)
}
}  
常量mapStateToProps=（状态）=>({
leagueFixtures:state.leagueFixtures
})
const mapDispatchToProps=（调度）=>{
返回{
}
}
导出默认连接(
MapStateTops，
mapDispatchToProps
)（联赛）

反应成分

import React from 'react'


const FixtureList = (props) => {

  return (
    <div className="col-sm-4">
      <li className="list-group-item">
        {props.matchday}
        {props.fixture.homeTeamName} vs {props.fixture.awayTeamName}
      </li>
      <p></p>
    </div>
  );
}

export default FixtureList;

从“React”导入React
常量固定列表=（道具）=>{
返回(

{props.matchday}
{props.fixture.homeTeamName}与{props.fixture.awayTeamName}


);
}
导出默认固定列表；

此时，我循环遍历容器中的所有数据，并在组件中打印出来。它的工作如预期，但我想变异的数据，所以我可以实现一个不同的结果

谢谢

您可以使用。基本上，您试图获取的是派生数据，可以从服务器返回的原始数据中计算出来。
“重新选择”使其变得非常简单，并缓存结果，因此只要原始数据没有更改，派生数据就不会重新计算（目前在每个渲染中都是如此）

一个可能的实现如下：（使用lodash简化）

---

希望这有帮助[=

你可以使用《谢谢你》中的

getDerivedStateFromProps

。这帮了大忙！你的代码将比赛时间压缩到了38个比赛日，但只有一支球队在比赛日。我想向所有其他球队展示这一比赛日的比赛情况！你帮助我走上了正确的道路。谢谢：）NP如果你认为答案是正确的，请随意标记

import { createSelector } from 'reselect';
import { keyBy } from 'lodash';

const fixtures = state => state.LeagueFixtures

const fixturesByMatchDaySelector = createSelector(
  fixtures,
  (fixtures) => keyBy(fixtures, ({matchday}) => matchday),
) 

const mapStateToProps = (state) => ({
  leagueFixtures: state.LeagueFixtures,
  fixturesByMatchDay: fixturesByMatchDaySelector(state)
})