反应日期选择器 [英] React Datepicker

问题描述

我正在尝试创建一个小型日历计算器，该计算器将两个日期相减并给出天数.

I'm trying to create small calendar calculator which subtracts two dates and give amount of days.

为此，我选择了库react-datepicker.

现在，我遇到一个问题，state之后会更新一次单击.这意味着当我第二次选择日期时，我会得到上一次的结果.

Now I have a problem that state updates one click after. This means that when I choose date 2nd time I get result for the previous one.

此外，我不明白为什么当我取消注释...this.state以保存state的不变性时，它会停止更新.

Also, I can't understand why when I uncomment ...this.state for saving immutability of state it stops updating.

有我的代码

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';

import 'react-datepicker/dist/react-datepicker.css';
import CalendarInput from '../../UI/CalendarInput/CalendarInput';

class CalendarPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: moment(),
      endDate: moment(),
      days: 0
    };
    this.handleChangeEnd = this.handleChangeEnd.bind(this);
    this.handleChangeStart = this.handleChangeStart.bind(this);
    this.daysLeft = this.daysLeft.bind(this);
  }

  daysLeft() {
    let {startDate, endDate} = this.state;
    console.log(startDate);
    console.log(endDate);
    let amount = endDate.diff(startDate, 'days');
    this.setState({
      // ...this.state,
      days: amount
    });
  }

  handleChangeStart(date) {
    this.setState({
      // ...this.state,
      startDate: date
    });
    this.daysLeft();
  }

  handleChangeEnd(date) {
    this.setState({
      // ...this.state,
      endDate: date
    });
    this.daysLeft();
  }

  render() {
    return (
      <div>
        <h2 className="pl-2 mb-4">
          Calendar
        </h2>

        <div className="row no-gutters calculator-container">
          <DatePicker
            selected={this.state.startDate}
            selectsStart
            startDate={this.state.startDate}
            endDate={this.state.endDate}
            onChange={this.handleChangeStart}
            customInput={<CalendarInput label="departure"/>}
          />

          <DatePicker
            selected={this.state.endDate}
            selectsEnd
            startDate={this.state.startDate}
            endDate={this.state.endDate}
            onChange={this.handleChangeEnd}
            customInput={<CalendarInput label="arrival"/>}
          />

          <div className="amount">
            {this.state.days}
          </div>
        </div>

      </div>
    );
  }
}

export default CalendarPage;

推荐答案

您要在一个周期内多次调用setState，并在同一周期内引用this.state. setState不能保证在您调用状态对象时进行更新，但是会在以后的某个时间更新.

You are making multiple calls to setState within one cycle, and referencing this.state within the same cycle. setState does not guarantee to update the state object when you call it, but at some later time.

因此，您对this.daysLeft()的调用将访问先前的状态，而不是您因setState调用而预期的状态.

Therefore, your calls to this.daysLeft() will be accessing the prior state, not the one you expected as a result of the setState call.

setState有两种模式，一种是提供一个对象，该对象在以后的时间进行浅层合并；另一种是在状态可以更新时调用的回调函数.您可能需要使用后一种形式，以便可以保证状态更改是按顺序进行的.如果您阅读文档，则后者实际上是首选方式，对象形式是为了简化代码路径而提供的便利，并且从历史上看，我认为它已出现在许多教程中，这引起了混乱.

setState has two modes, one to provide an object which is shallow merged at a later time, another a callback function which is called when state can be updated. You may need to use the latter form so that you can guarantee that state changes are done in sequence. If you read the docs, the latter is actually the preferred mode, the object form is for convenience in simplistic code paths, and historically I think has found its way into a lot of tutorials, which leads to confusion.

反应setState文档

查看是否有帮助，如果修改代码后仍然遇到问题，请返回.如果需要，请发布修改后的代码.

See if this helps and come back if you modify your code and still have problems. Post your amended code if you do.

这篇关于反应日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！