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

Question

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

<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 Hook 与 deps 数组中的 userId 结合使用，但结果相同。

我的处理函数：

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函数中访问它。

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

Event handler function not updating, state undefined inside function scope

reactjs

usecallback