如何解决“使用反向（）通过从API调用拉到数据映射（存储在终极版状态）的Javascript终极版/阵营]”

Question

this.props.playedGames从我的终极版国家拉动并责令最近日期的第一个条目（降序）。我需要为我的累积线图（chart.js之）中的数据是按照相反的顺序第一个条目的最近日期。我将如何做到这一点，而不使用在每次刷新其持续反转反转方法。我宁愿不重新调用API，因为我有我需要的数据。

我曾尝试创建，当页面刷新，所以它不会刷新的状态。我曾尝试这几种不同的方式。所有的失败。

我的代码：

import { connect } from 'react-redux';
import {withRouter} from 'react-router';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import {Line} from 'react-chartjs-2';

class ChartPage extends Component {
profitForChart = (props) => {
    let total = 0
    return this.props.playedGames.reverse().map( (game, index) => ({
      x: index,
      y: total += parseFloat(game.profit)

    }))
  } 
render() {
   if(!this.props.playedGames) return <h1>Loading...</h1>
    const { classes } = this.props;
    const data = {
      datasets: [{
        data: this.profitForChart(),
        label: 'PROFIT'
    }],
    labels: this.props.playedGames.map( game => (new Date(game.start_date_time)).toLocaleDateString()),
  }
  return(
      <div className={classes.root}

            <Line data={data} />

      </div>
  )
 }
}
const mapStateToProps = ( state ) => {
  return {
    playedGames: state.userPlayedGames.playedGames,
    isLoading: state.isLoading,
  }
}
const mapDispatchToProps = {
}
ChartPage.propTypes = {
  classes: PropTypes.object.isRequired,
};
export default  compose(
  withStyles(styles, {
    name: 'ChartPage',
  }),
  connect(mapStateToProps, mapDispatchToProps))(withRouter(ChartPage));

预期结果：二千○一十八分之一，二千〇一十八分之二，二千零十八分之三与累积线图会随着时间的推移。

实际结果：（是在初始加载和所有其他刷新正确的），但下一个是错误的：图形累积是逆及日期倒退：二千零十八分之三，二千〇一十八分之二，二千〇一十八分之一。 -----

Answer 1

让我们假设API提供了以下答复，

const response = [{x: 3, y: 5, date: '1/2/2018'}, {x: 3, y: 5, date: '1/4/2019'}, {x: 3, y: 5, date: '1/4/2013'}, {x: 3, y: 5, date: '1/2/2016'}]

现在，我们可以通过使用排序功能日期排序此。

response
   .sort((a,b) => new Date(a.date) > new Date(b.date) ? -1 : 0)
   .map(// use your above code)

Answer 2

reverse()（一个也sort()）是就地功能，这意味着它修改数组调用它的内容。它违背反应是不可变的思想，其中的数据都是不被他们创建后改变。

我建议你克隆阵列（和反向克隆数组）传递到组件的道具之前：

const mapStateToProps = ( state ) => {
  return {
    playedGames: state.userPlayedGames.playedGames.slice().reverse(),
    isLoading: state.isLoading,
  }
}

Answer 3

您可以使用static getDerivedStateFromProps(props, state)人生生命周期的方法来扭转你的“playedGames”只有真正的道具，而不是相反在每次刷新。

static getDerivedStateFromProps(props, state) {
    // Any time the playedGames changes,
    // Reverse and store in the state
    if (props.playedGames !== state.playedGames) {
        const dataForChart = props.playedGames.reverse().map((game, index) => ({
            x: index,
            y: (total += parseFloat(game.profit)),
        }));

        return {
            dataForChart: dataForChart,
            playedGames: playedGames,
        };
    }

    return null;
}

然后可使用状态排序的数据绘制图表。 （this.state.dataForChart）

Answer 4

我发现使用.splice（）答案反向（），如下所示：

import { connect } from 'react-redux';
import {withRouter} from 'react-router';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import {Line} from 'react-chartjs-2';

class ChartPage extends Component {
profitForChart = (props) => {
    let total = 0
    return this.props.playedGames.slice().reverse().map( (game, index) => ({
      x: index,
      y: total += parseFloat(game.profit)

    }))
  } 
render() {
   if(!this.props.playedGames) return <h1>Loading...</h1>
    const { classes } = this.props;
    const data = {
      datasets: [{
        data: this.profitForChart(),
        label: 'PROFIT'
    }],
    labels: this.props.playedGames.slice().reverse().map( game => (new Date(game.start_date_time)).toLocaleDateString()),
  }
  return(
      <div className={classes.root}

            <Line data={data} />

      </div>
  )
 }
}
const mapStateToProps = ( state ) => {
  return {
    playedGames: state.userPlayedGames.playedGames,
    isLoading: state.isLoading,
  }
}
const mapDispatchToProps = {
}
ChartPage.propTypes = {
  classes: PropTypes.object.isRequired,
};
export default  compose(
  withStyles(styles, {
    name: 'ChartPage',
  }),
  connect(mapStateToProps, mapDispatchToProps))(withRouter(ChartPage));