Chakra UI Modal问题：onOpen点击无响应，需组件状态变更后触发

以下是针对该问题的几种可行修复方案：

1. 关闭React 18的Strict Mode（开发环境测试） #

React 18的Strict Mode在开发环境下会触发组件双重挂载/渲染，可能导致Chakra的useDisclosure hook状态更新延迟。暂时关闭Strict Mode验证：

修改项目入口文件（如index.tsx）：

// 原代码
root.render(
  <StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </StrictMode>
);

// 修改后
root.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>
);

2. 手动管理Modal状态替代useDisclosure #

改用React原生useState手动控制Modal显隐，排查是否为useDisclosure的兼容性问题：

修改组件代码：

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

export default function BuyerQrConfirm({ ...props }: any) {
    const [isOpen, setIsOpen] = useState(false);
    const onOpen = () => setIsOpen(true);
    const onClose = () => setIsOpen(false);

    return (
        <>
          <Button onClick={onOpen}>Open Modal</Button>
            <Modal isOpen={isOpen} onClose={onClose} >
                <ModalOverlay />
                <ModalContent>
                    <ModalHeader>Modal Title</ModalHeader>
                    <ModalCloseButton />
                    <ModalBody></ModalBody>
                    <ModalFooter>
                        <Button colorScheme='blue' mr={3} onClick={onClose}>
                            Close
                        </Button>
                        <Button variant='ghost'>Secondary Action</Button>
                    </ModalFooter>
                </ModalContent>
            </Modal >
        </>
    )
}

3. 给Modal添加key属性强制重新渲染 #

通过绑定与isOpen关联的key，确保状态变化时Modal立即重新挂载：

<Modal key={isOpen} isOpen={isOpen} onClose={onClose} >
  {/* 其余Modal内容保持不变 */}
</Modal>

4. 检查Chakra Provider的嵌套与配置 #

确保项目中仅存在一个Chakra Provider实例，避免多层嵌套导致上下文冲突；同时验证Provider是否完整包裹了所有使用Chakra组件的区域，无遗漏。

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