React Datepicker重置选中日期为今日时旧日期仍高亮如何修复

内联模式下的react-datepicker存在内部状态缓存问题：当直接更新selected属性为新的Date对象时，组件不会主动清除之前选中日期的高亮样式类，导致新旧两个日期同时出现选中高亮。

两种方案二选一即可：

• 方案1（推荐，无副作用）：给组件绑定和选中值联动的key，强制状态重置时重挂载组件，彻底清空内部缓存

const [startDate, setStartDate] = useState(new Date())

<DatePicker
    // key绑定选中日期的时间戳，值变动时组件自动重新挂载，无残留状态
    key={startDate.getTime()}
    selected={startDate}
    onChange={date => setStartDate(date)}
    inline
/>

const saveData = () => {
    // 此处写接口提交逻辑
    // 重置为当日，key同步变化触发组件重渲染，不会残留旧日期高亮
    setStartDate(new Date());
}

• 方案2：通过两步赋值强制刷新组件选中状态，不需要重挂载组件

const saveData = () => {
    // 此处写接口提交逻辑
    // 第一步先清空选中值，清掉组件内部的旧选中缓存
    setStartDate(null);
    // 在下一个事件循环赋值当日日期，触发正确的高亮渲染
    setTimeout(() => {
        setStartDate(new Date());
    }, 0);
}

提示：React 18 开启自动批处理的场景下，方案2需要把setTimeout内的状态更新用flushSync包裹，否则可能不生效，优先选方案1兼容性更好。

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