Question

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

当前行为示例：

带有空日期字段的组件加载
我选择3/28/2017获取以下控制台日志

main.ffde8a1f.js：8它更改了日期

main.ffde8a1f.js：8 date = 1490673600000

main.ffde8a1f.js：8 dueDate value =
然后我选择3/22/2017获取以下控制台日志：

main.ffde8a1f.js：8它更改了日期

main.ffde8a1f.js：8 date = 1490155200000

main.ffde8a1f.js：8 dueDate value = 1490673600000

第二个和第三个日志应具有相同的值。任何人都可以向我解释为什么会发生这种奇怪的行为吗？

MY ATTEMPT

进口

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

  }

处理日期选择

问题提供日期时我的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
  }

渲染
我现在保持日期选择器简单，以尽量减少潜在的错误。只有所选日期从状态和handleChangeDate方法传入选定日期。

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

Answer 1

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

来自React docs：

setState（）不会立即改变this.state，但会创建挂起状态转换。调用后访问this.state 方法可以返回现有值。没有保证调用setState和调用的同步操作为获得业绩增长而受到批评。

如果您想检查您的状态是否已更新，您可以使用回调作为setState的第二个参数，或者在shouldComponentUpdate(nextProps, 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, callback)）

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

shouldComponentUpdate文档：

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

Answer 2

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

使用日期代替startDate

React-DatePicker使用先前选择的日期

2 个答案: