时间戳

首页 > 解决方案 > 如何在呈现数据之前编辑或操作我在我的状态下获得的数据

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

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

谢谢

标签： javascriptreactjsecmascript-6redux

解决方案

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

一个可能的实现是这样的：（为简单起见，使用 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)
})

希望有帮助[=

推荐阅读