从 React.js 发送到后端服务器时更改时间格式答案

【问题标题】：Changing time format when sending from React.js to the backend server从 React.js 发送到后端服务器时更改时间格式
【发布时间】：2018-08-27 19:54:56
【问题描述】：

我正在尝试将日期范围发送到后端节点服务器。一切正常，并且我在日历中选择的时间被正确选择，即。我在日历中选择的日期在发送到后端之前是相同的。但是当我在控制台网络中检查我的有效负载时，这一天不再正确 - 它总是提前一天。由于某种原因，我不知道日期会随着那一天而改变。

这是我的代码块：

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

例如，这是我尝试选择 8 月 20 日和 21 日时的日志（位置与上述相同）。

[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"

【问题讨论】：

你能告诉我们预期的行为和目前的行为吗？
这很可能是因为使用 Javascript 日期对象时的时区。看到这个 - stackoverflow.com/questions/7556591/…
我用一个例子更新了问题

标签： javascript node.js reactjs time

【解决方案1】：

能否分享sendDateRange 的实现细节？运行代码后，日期转换可能发生的唯一位置是在调用sendDateRange 之后。

在通过网络发送日期之前，您如何将日期转换为字符串？

【讨论】：

【解决方案2】：

我想我找到了控制它的方法：

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

感谢您让我走上正确的道路！

【讨论】：