Question

我正在使用react和redux构建应用

导航到新URL后，将进行API调用，数据现在以容器状态存在。

我想要做的是在子组件（FixtureList）中使用该API数据之前。 我想重构数据。我该怎么做？我该怎么做？以下是数据的示例：

从Data示例中，您可以看到我们有一个名为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 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;

此刻，我遍历容器中的所有数据并将其打印在我的组件中。它按预期工作，但我想改变数据，以便我可以获得不同的结果。

谢谢

Answer 1

您可以使用reselect。基本上你要获得的是派生的数据，可以从服务器返回的原始数据中计算出来。
重新选择使得 plus 非常容易缓存结果，因此只要原始数据没有改变，就不会重新计算派生数据（目前它在每次渲染中都是这样）。

可能的实现方式如下:(为简单起见使用lodash）

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)
})

希望有所帮助[=

如何在渲染数据之前编辑或操作我在状态中获得的数据

1 个答案: