Изменение формата времени при отправке из React.js на бэкэнд-сервер

Question

Я пытаюсь отправить диапазон дат на сервер внутреннего узла. Все работает просто отлично, и время, которое я выбираю в своем календаре, правильно выбрано, т.е. даты, которые я выбираю в календаре, совпадают непосредственно перед отправкой в ​​бэкэнд. Но когда я проверяю свою полезную нагрузку в сети консоли, день больше не правильный - он всегда на день раньше. По какой-то причине я не знаю, даты меняются с этим одним днем.

Вот мой кусок кода:

import React, { Component } from 'react';
import Calendar from 'react-calendar';
import { connect } from 'react-redux';
import * as actions from '../../actions';

class Holidays extends Component {

    state = { date: [new Date(), new Date()], dates: [] }

    calculateRange(dateRange) {
        const getDates = (startDate, endDate) => {
            let dates = [],
                currentDate = startDate,
                addDays = function(days) {
                  const date = new Date(this.valueOf());
                  date.setDate(date.getDate() + days);
                  return date;
                };
            while (currentDate <= endDate) {
              dates.push(currentDate);
              currentDate = addDays.call(currentDate, 1);
            }
            return dates;
          };

          const dates = getDates(new Date(dateRange[0]), new Date(dateRange[1]));      
          this.setState({ dates });                                                                                                     
    }

    onChange = date => this.calculateRange(date[0], date[1]);

    handleClick() {
        const { dates } = this.state;
        console.log(dates); // -----here still I'm getting correct values
        const { sendDateRange } = this.props;
        sendDateRange({ dates });
    }

    render() { 
        return ( 
            <div className="centered-column">
                <h1>Holidays</h1>
                <Calendar
                    onChange={(date) => this.calculateRange(date)}
                    value={this.state.date}
                    locale="pl"
                    returnValue="range"
                    selectRange={true}
                />
                <a className="btn margin__vertical" onClick={() =>  this.handleClick()}>BOOK</a>
            </div>
         );
    }
}

export default connect(null, actions)(Holidays);

Например, вот мой журнал (в положении, аналогичном описанному выше), когда я пытаюсь выбрать 20 и 21 августа.

1008 *

[Mon Aug 20 2018 00:00:00 GMT+0200 (Central European Summer Time), Tue Aug 21 2018 00:00:00 GMT+0200 (Central European Summer Time)]

По моим данным это показывает:

"2018-08-19T22:00:00.000Z", "2018-08-20T22:00:00.000Z"

Answer 1

Я думаю, что нашел способ контролировать это:

  const startingTime = dateRange[0],
        correctedTime = new Date( startingTime.getTime() + startingTime.getTimezoneOffset()* -60000 );

Итак, теперь весь код выглядит так:

import React, { Component } from 'react';
import Calendar from 'react-calendar';
import { connect } from 'react-redux';
import * as actions from '../../actions';

class Holidays extends Component {

    state = { date: [new Date(), new Date()], dates: [] }

    calculateRange(dateRange) {
        const getDates = (startDate, endDate) => {
            let dates = [],
                currentDate = startDate,
                addDays = function(days) {
                  const date = new Date(this.valueOf());
                  date.setDate(date.getDate() + days);
                  return date;
                };
            while (currentDate <= endDate) {
              dates.push(currentDate);
              currentDate = addDays.call(currentDate, 1);
            }
            return dates;
          };

          const startingTime = dateRange[0],
                correctedTime = new Date( startingTime.getTime() + startingTime.getTimezoneOffset()* -60000 );  //here's the magic ;)

          const dates = getDates(correctedTime, dateRange[1]);      
          this.setState({ dates });                                                                                                     
    }

    onChange = date => this.calculateRange(date[0], date[1]);

    handleClick() {
        const { dates } = this.state;
        const { sendDateRange } = this.props;
        sendDateRange({ dates });
    }

    render() { 
        return ( 
            <div className="centered-column">
                <h1>Holidays</h1>
                <Calendar
                    onChange={(date) => this.calculateRange(date)}
                    value={this.state.date}
                    locale="pl"
                    returnValue="range"
                    selectRange={true}
                />
                <a className="btn margin__vertical" onClick={() =>  this.handleClick()}>ZAREZERWUJ</a>
            </div>
         );
    }
}

export default connect(null, actions)(Holidays);

Спасибо, что направили меня на правильный путь!

Answer 2

Сможете ли вы поделиться подробностями реализации sendDateRange? После запуска вашего кода, похоже, что единственное место, где может произойти преобразование даты, это после вызова sendDateRange.

Как вы конвертируете даты в строки перед отправкой их по сети?