React中Datepicker日期选择后无法获取当前值的问题解决

React里useState的更新是异步的，而且组件函数内的state变量是当前渲染周期的闭包快照。你在onChangePicker里调用setInfo(date_new)后，当前函数作用域里的Info依然是调用函数时的旧值——哪怕用sleep等待5秒也没用，因为这个Info不会在当前函数里跟着state更新同步变化。

有两种靠谱的处理方式：

方法一：直接使用传入的date_new #

既然date_new就是用户刚选择的最新日期，直接用它就行，没必要等state更新：

async function onChangePicker(date_new) {
  setInfo(date_new);
  // 直接用date_new代替Info
  console.log(date_new);
  await sleep(5000);
  console.log(date_new);
}

方法二：用useEffect监听state变化 #

如果后续逻辑必须依赖更新后的Info状态，可以通过useEffect监听Info的变化，等状态更新完成后再执行操作：

import { useState, useEffect } from 'react';

const Datagrid = () => {
  const [Info, setInfo] = useState(new Date());

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  async function onChangePicker(date_new) {
    setInfo(date_new);
  }

  // 监听Info变化，状态更新后执行后续逻辑
  useEffect(() => {
    async function handleUpdate() {
      await sleep(5000);
      console.log(Info); // 这里拿到的是更新后的最新值
    }
    handleUpdate();
  }, [Info]); // 依赖项设为Info，只有当Info变化时才触发

  return (
    <div className="App">
      <DatePicker 
        dateFormat="yyyy-MM-dd" 
        selected={Info} 
        onChange={(date_new) => onChangePicker(date_new)} 
      />
    </div>
  );
}

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