React Flatpickr onChange事件中状态值为空问题求助

你遇到的是React闭包特性导致的问题，具体逻辑如下：

• 组件第一次渲染时，pickerR的初始值是空数组[]，此时handlePickerChange函数被创建，它会捕获当前这个空的pickerR状态。
• 你的useEffect是在组件首次渲染完成后执行的，执行后才调用setPickerR更新状态，触发组件二次渲染。
• 二次渲染时会生成新的handlePickerChange函数，这个新函数能捕获到更新后的pickerR值，但Flatpickr实例是在第一次渲染时初始化的，它绑定的是第一次创建的旧版handlePickerChange，而非新的。
• 所以当Flatpickr触发onChange时，调用的是旧函数，打印的自然是它捕获的初始空数组；而组件外部的console.log(pickerE)是在二次渲染时执行的，能拿到更新后的状态值。

• 验证方案：给handlePickerChange用useCallback包裹并添加pickerR作为依赖，同时把pickerR加入Flatpickr初始化的依赖项，确保回调能更新为最新版本。
• 替代方案：用useRef存储最新的pickerR值，在useEffect里同步更新ref的current属性，然后在handlePickerChange里读取ref.current，这样总能拿到最新的状态值。

内容的提问来源于stack exchange，提问作者rustam.as