React-DatePicker使用先前选择的日期更新状态

Question

我想在从React DatePicker中选择日期时更新组件的状态。我下面有一些奇怪的行为。

当前行为的例子：

>

带有空日期字段的组件加载

我选择2017年3月28日并获得以下控制台日志

主要的ffde8a1f。js:8它改变了日期

main.ffde8a1f.js： 8日期=1490673600000

主要的ffde8a1f。js:8 dueDate值=

假设我选择2017年3月22日并获得以下控制台日志：

主要的ffde8a1f。js:8它改变了日期

主要的ffde8a1f。js:8日期=1490155200000

main.ffde8a1f.js：8 dueDate值=1490673600000

第二个和第三个日志应具有相同的值。有人能解释一下为什么会发生这种奇怪的行为吗？

我的尝试

进口

import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';

组件

我设置dueDate的状态为"开始。

export default class Request extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      dueDate: '',
    }

    this.handleChangeDate = this.handleChangeDate.bind(this);

  }

处理日期选择

ISSUE我的handleChangeDate函数将在提供日期时触发，并且以毫秒为单位的日期将登录到控制台，但是dueDate被记录为它应该是的前一个值。

 handleChangeDate(date) {
    console.log("it changed dates");
    console.log('date = ' + date);  //date in milliseconds logs properly
    this.setState({
      dueDate: date
    });
    console.log('dueDate value = ' + this.state.dueDate);  //date from state logs the previous value rather than its new value
  }

Render
目前，我正在简化日期选择器，以最大限度地减少潜在的错误。只有所选日期从状态和所选日期的handleChangeDate方法传入。

  render() {
    return (
      <div className="requestDetails">
        <h2>Due Date</h2>
        <DatePicker
           selected={this.state.dueDate}
           onChange={this.handleChangeDate}
        />
      </div>
    );
  }
}

Answer 1

shouldDidUpdate(nextProps, nextState) {
        if (this.state.startDate !== nextState.startDate) {
            return true;
        }
        return true;
    }

用你的日期代替开始日期

Answer 2

this.setState不能保证是同步的，因为它们可以批量处理。这意味着，尽管您在代码中的setState之后调用console.log，但状态实际上可能尚未更改。

从React文档：

setState（）不会立即对此进行变异。状态，但创建挂起的状态转换。访问这个。调用此方法后的状态可能返回现有值。无法保证对setState调用的同步操作，并且可能会对调用进行批处理以提高性能。

如果要检查您的状态是否已更新，可以使用回调作为setState的第二个参数，或者在shouldComponentUpdate（nextrops，nextState）生命周期方法中添加一些逻辑。

示例：

handleChangeDate(date) {
  this.setState({
    dueDate: date
  }, () => console.log(this.state.dueDate)); // This will show the updated state when state is set.
}

或者

shouldComponentUpdate(nextProps, nextState) {
  if (this.state.dueDate !== nextState.dueDate) {
    console.log('dueDate:  ', nextState.dueDate);
  }
}

setState文档：（注意函数签名，setState（nextState，回调））

https://facebook.github.io/react/docs/react-component.html#setstate

应更新组件文档：

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate