Reactjs 组件未正确读取挂钩状态

我有一个按钮（h1）组件，它有一个onclick处理程序（handleDateLabelClick），该处理程序可以更改状态以决定日历是否可见。如果工作正常，它应该将状态更改为当前的相反状态。当前，正确单击按钮会导致日历出现，但再次单击同一按钮不会导致日历消失。我已经在handleDateLabelClick函数中添加了一个控制台日志，以查看正在读取的内容，并且每次calendarOpen状态为false时。当我在devtools中观察到状态运行正常（打开时为true，关闭时为false）时，这变得更加有趣。这是我的代码（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图书卡=({
…道具
}) => {
常量[calendarOpen，setCalendarOpen]=useState（false）
const handleDateLabelClick=（）=>{
setCalendarOpen（！calendarOpen）
}
{parsedDate.toLocaleDateString（'en-US'，dateFormat）}

历法

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)

const-EnhancedCalendar=({
手淫，
日历开放，
设置日历打开，
…道具
}) => {
EnhancedCalendar.handleClickOutside=（）=>setCalendarOpen（false）
返回(
日期<新日期（）}
tileDisabled={（{activeStartDate，date，view}）=>{
const availabilitiesForCurrentDate=getTimesForCurrentDate（日期，props.detail.availabilities）
返回(
！CurrentDate.length的可用性
)
}}
/>
)
}
常量ClickOutside配置={
handleClickOutside:（）=>增强Calendar.handleClickOutside
}
导出默认onClickOutside（增强Calendar，单击OutsideConfig）

---

正如您在评论中所说：

---

我在日历中有一个钩子，可以检测是否有鼠标外的点击 日历。它在日历中的该点执行。及 你找到了错误点！！非常感谢。但问题依然存在， 如何在没有当前bug的情况下保持此功能

我认为你的日历在与你的头衔抗争

要轻松修复此问题，您可以有条件地呈现日历：

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

{parsedDate.toLocaleDateString（'en-US'，dateFormat）}
{calendarOpen？：null}

日历如何使用

setCalendarOpen

？我在日历中有一个钩子，可以检测日历外是否有单击。它在该点从日历内执行。因此，单击标题将是在日历外的单击？我尝试实施您的解决方案，但不幸的是，我仍然有相同的问题。还有什么我应该修改的吗？我很想知道为什么这个解决方案有效。是因为：当calendarOpen的计算结果为false时，该组件不存在。因此，提供onClickOutside功能的HOC没有什么可包装的？嗯。。。你能从日历中添加你提到的相关代码吗？哪里是

clickOutsideConfig

used？它只是用来包装日历的。我以为我把它包括在内了。更新