事件处理函数未更新，函数范围内状态未定义

Question

我正在制作一个调度程序应用程序，为此我正在使用日历组件库。用法看起来像这样

<Kalend
onEventClick={onEventClick}
onNewEventClick={onNewEventClick}
events={bookings}
initialDate={new Date().toISOString()}
hourHeight={60}
initialView={CalendarView.WEEK}
disabledViews={[CalendarView.DAY]}
timeFormat={'24'}
weekDayStart={'Monday'}
calendarIDsHidden={['work']}
language={'en'}
/>

我的问题是我在处理程序函数onEventClick中访问当前用户的userId。这个userId是由自定义钩子异步提供的，在初始呈现时是undefined。一旦userId更新，它就不会在函数范围内更新。我还尝试使用useCallback钩子与userId在深度数组，但与相同的结果。

我的handler函数:

const onEventClick = (data: any) => {
setPopupData(data)
setEventClicked(true)
if (userProfile?.id === data.ownerId) {
setModalOpen(true)
} else {
setPreviewOpen(true)
}
};

当控制台在组件范围内记录userId时，它会更新(由于Hook最终获取userProfile)，但在处理程序函数中它仍然是undefined

Answer 1

您应该可以使用useRef - https://reactjs.org/docs/hooks-reference.html#useref

当你稍后用像

这样的东西分配userId时

const userIdRef = useRef()
// somewhere in your code
userIdRef.current = userId

，你将能够在onEventClick函数中访问它。