组件无法正确读取挂钩状态

Question

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

BookCard

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

如您在评论中所述：

  

我在“日历”中有一个钩子，用于检测是否有外部点击   日历。届时它将在Calendar中执行。和   你发现了错误的地方！谢谢！问题仍然存在，   如何在没有当前错误的情况下保持此功能

我认为您的日历正在与您的标题作斗争。

要轻松修复，可以有条件地渲染日历：

String output = zone.withZoneSameInstant(ZoneId.of("US/Eastern")).toLocalDateTime().format(outputFormat);