Question

我正在尝试创建小日历计算器，它减去两个日期并给出天数。

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

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

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

有我的代码

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;

Answer 1

您在一个周期内多次调用--------------------------------------------------------------------------- ValueError Traceback (most recent call last) <ipython-input-234-1eb15c81506e> in <module>() ----> 1 df_temp = data3['14:00:00' < data1 < '14:50:00'].mean() /anaconda/lib/python3.6/site-packages/pandas/core/generic.py in __nonzero__(self) 951 raise ValueError("The truth value of a {0} is ambiguous. " 952 "Use a.empty, a.bool(), a.item(), a.any() or a.all()." --> 953 .format(self.__class__.__name__)) 954 955 __bool__ = __nonzero__ ValueError: The truth value of a Series is ambiguous. Use a.empty, a.bool(), a.item(), a.any() or a.all().，并在同一周期内引用setState。 this.state不保证在调用时更新状态对象，但稍后会更新。

因此，您对setState的来电将会访问先前的状态，而不是this.daysLeft()来电所预期的状态。

setState有两种模式，一种是提供稍后合并的对象，另一种是在状态可以更新时调用的回调函数。您可能需要使用后一种形式，以便您可以保证状态更改按顺序完成。如果您阅读文档，后者实际上是首选模式，对象形式是为了方便简单的代码路径，并且在历史上我认为它已经进入很多教程，这会导致混淆。

React setState docs

如果您修改代码并仍然遇到问题，请查看是否有帮助并返回。如果你这样做，请发布修改后的代码。

Answer 2

From docs:

React可以将多个setState（）调用批处理为单个更新性能

这意味着：

handleChangeStart(date) {
  // this update will not be executed directly...
  this.setState({
    startDate: date
  });
  this.daysLeft();
}

daysLeft() {
    // previous setState didn't yet take effect, so we access an old startDate
    let {startDate, endDate} = this.state; 
    console.log(startDate);
    console.log(endDate);
    let amount = endDate.diff(startDate, 'days');
    this.setState({
      days: amount
    });
}

你可以通过以下方式修复它：

handleChangeStart(date) {
  this.setState(prevState => {
    return { 
      startDate: date,
      days: this.daysLeft(date, prevState.endDate),
    }
  });
}

daysLeft(startDate, endDate) {
  return endDate.diff(startDate, 'days');
}

反应Datepicker

2 个答案: