组件未正确读取挂钩状态

Question

我有一个按钮 (h1) 组件，它有一个 onclick 处理程序 (handleDateLabelClick)，它更改状态以决定日历是否可见。正常工作，它应该将状态更改为当前相反的状态。目前，正确单击按钮会导致日历出现，但再次单击同一按钮不会导致日历消失。我在 handleDateLabelClick 函数中添加了一个控制台日志，以查看正在读取的内容，并且每次 calendarOpen 状态为 false。当我在 devtools 中观察到状态运行正常时，这变得更加有趣（打开时为真，关闭时为假）。这是我的代码（BookCard 是 Calendar 的父级）：

书卡

const BookCard = ({
   ...props
}) => {
const [calendarOpen, setCalendarOpen] = useState(false)

const handleDateLabelClick = () => {
    setCalendarOpen(!calendarOpen)
}

<DateWrapper>
    <DateHeading onClick={handleDateLabelClick} level={4}>
        {parsedDate.toLocaleDateString('en-US', dateFormat)}
    </DateHeading>
    <Calendar
        handleChooseDate={handleChooseDate}
        calendarOpen={calendarOpen}
        setCalendarOpen={setCalendarOpen}
        {...props}
    />
</DateWrapper>

日历

const EnhancedCalendar = ({
  handleChooseDate,
  calendarOpen,
  setCalendarOpen,
  ...props
}) => {

  EnhancedCalendar.handleClickOutside = () => setCalendarOpen(false)

  return (
    <StyledCalendar
      calendarOpen={!!calendarOpen}
      showNeighboringMonth
      minDetail="month"
      onClickDay={handleChooseDate}
      activeStartDate={props.experienceDate}
      tileDisabled={({ activeStartDate, date, view }) => date < new Date()}
      tileDisabled={({ activeStartDate, date, view }) => {
        const availabilitiesForCurrentDate = getTimesForCurrentDate(date, props.detail.availabilities)
        return (
          !availabilitiesForCurrentDate.length
        )
      }}
    />
  )
}

const clickOutsideConfig = {
  handleClickOutside: () => EnhancedCalendar.handleClickOutside
}

export default onClickOutside(EnhancedCalendar, clickOutsideConfig)

Answer 1

正如你在评论中所说：

我在日历中有一个钩子，可以检测外部是否有点击 日历。它在那个点从日历中执行。和 你发现了错误点！谢谢你！问题仍然存在， 如何在没有当前错误的情况下保留此功能

我认为您的日历正在与您的标题发生冲突。

为了轻松修复它，您可以有条件地渲染您的日历：

<DateWrapper>
    <DateHeading onClick={handleDateLabelClick} level={4}>
        {parsedDate.toLocaleDateString('en-US', dateFormat)}
    </DateHeading>
    {calendarOpen ? <Calendar
        handleChooseDate={handleChooseDate}
        calendarOpen={calendarOpen}
        setCalendarOpen={setCalendarOpen}
        {...props}
    /> : null }
</DateWrapper>