React中Chakra UI Modal首次可打开，关闭后无法再次触发问题

可能原因及解决方案 #

1. 版本兼容性问题 #

Chakra UI的useDisclosure钩子或Modal组件在部分旧版本中存在状态更新异常的bug，优先尝试将相关依赖更新至稳定版本：
执行以下命令更新依赖：

npm update @chakra-ui/react @chakra-ui/icons @emotion/react @emotion/styled framer-motion

若使用yarn则执行：

yarn upgrade @chakra-ui/react @chakra-ui/icons @emotion/react @emotion/styled framer-motion

2. 替换useDisclosure为手动状态控制 #

如果更新版本后问题仍存在，可暂时放弃useDisclosure，改用React原生useState手动管理弹窗状态，规避hook内部逻辑异常：

import { Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Center } from '@chakra-ui/react'
import React, { useState } from 'react'

export default function Register() {
  // 手动管理弹窗状态
  const [isOpen, setIsOpen] = useState(false)
  const onOpen = () => setIsOpen(true)
  const onClose = () => setIsOpen(false)

  return (
    <Center height={500}>
        <Button onClick={onOpen}>Open Modal</Button>

        <Modal isOpen={isOpen} onClose={onClose}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>Modal Title</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              test
            </ModalBody>

            <ModalFooter>
              <Button colorScheme='blue' mr={3} onClick={onClose}>
                Close
              </Button>
              <Button variant='ghost'>Secondary Action</Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
    </Center>
  )
}

3. 排查全局状态或第三方库干扰 #

检查项目中是否有全局状态管理工具（如Redux、Zustand）或第三方UI库修改了React的状态更新逻辑，导致useDisclosure的状态无法正常同步。可在干净的测试组件中单独运行Modal代码，确认是否为环境问题。

内容的提问来源于stack exchange，提问作者sarem eskandary