Как исправить «использовать reverse () для сопоставления через вызов данных API, извлеченный из данных (хранится в состоянии избыточности) [Javascript Redux / React]» - PullRequest
Новая
       7

Как исправить «использовать reverse () для сопоставления через вызов данных API, извлеченный из данных (хранится в состоянии избыточности) [Javascript Redux / React]»

0 голосов
/ 07 февраля 2019

this.props.playedGames извлекает данные из моего состояния Redux и упорядочивает самые последние даты до первой записи (в порядке убывания).Мне нужны данные для моего кумулятивного линейного графика (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));

Ожидаемый результат: 1/2018, 2/2018, 3/2018 с накоплением линейного графика с течением времени.

Фактический результат: (верно при начальной загрузке и при каждом другом обновлении), но следующий неверен: график накапливается обратно, а даты идут в обратном направлении: 3/2018, 2/2018, 1/2018.-----

Ответы [ 4 ]

0 голосов
/ 08 февраля 2019

Я нашел ответ, используя .splice (). Reverse (), как показано ниже: 

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));
0 голосов
/ 07 февраля 2019

reverse() (также sort()) - это функция на месте, то есть она изменяет содержимое вызывающего ее массива.Это идет вразрез с неизменной идеологией реагирования, согласно которой данные не должны изменяться после их создания.

Я предлагаю вам клонировать массив (и обратить клонированный массив) перед передачей его в подпорки компонента: 

const mapStateToProps = ( state ) => {
  return {
    playedGames: state.userPlayedGames.playedGames.slice().reverse(),
    isLoading: state.isLoading,
  }
}
0 голосов
/ 07 февраля 2019

Вы можете использовать static getDerivedStateFromProps(props, state) метод жизненного цикла, чтобы реверсировать ваши «PlayGames» только реквизиты вместо реверса при каждом обновлении. 

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)

0 голосов
/ 07 февраля 2019

Предположим, что 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)
...