React Day Picker组件选择结束日期时状态需二次点击才更新

嘿，我之前也踩过这个坑！你遇到的这个“点击结束日期后状态要第二次才更新”的问题，本质上不是react-day-picker组件的问题，而是React状态更新的异步特性导致的——你在handleFromChange和handleToChange里直接打印this.state的时候，状态其实还没完成更新呢！

问题原因 #

React的setState是异步操作，当你调用setState修改状态后，React不会立刻同步更新this.state的值，而是会把状态更新任务加入队列，等合适的时机再批量更新。所以你第一次点击结束日期时，console.log(this.state)输出的还是更新前的旧状态；第二次点击时，才会显示上一次点击后的状态，看起来就像是“滞后了一次”。

解决方案 #

要想在状态更新完成后再打印正确的状态，有两种常用方法：

1. 使用setState的回调函数

setState支持第二个参数，这是一个回调函数，会在状态更新完成、组件重新渲染后执行。把你的console.log放在这个回调里，就能拿到最新的状态了：

handleFromChange = day => {
  this.setState({ from: day }, () => {
    // 这里的this.state已经是更新后的状态
    console.log(this.state);
  });
};

handleToChange = day => {
  this.setState({ to: day }, () => {
    console.log(this.state);
  });
};

2. 类组件中使用componentDidUpdate生命周期钩子

如果你需要在状态更新后做更多逻辑处理，也可以用componentDidUpdate来监听状态变化：

componentDidUpdate(prevProps, prevState) {
  // 当from或to状态变化时，打印最新状态
  if (prevState.from !== this.state.from || prevState.to !== this.state.to) {
    console.log(this.state);
  }
}

额外说明 #

其实你的组件表面看起来正常是完全合理的——因为React会在状态更新完成后自动触发组件重新渲染，所以UI上的日期选择是实时生效的，只是你控制台的打印时机不对，才产生了“状态没更新”的错觉。官网示例的逻辑本身是没问题的～

内容的提问来源于stack exchange，提问作者patrickrs