Next.js+Chakra UI：传递useDisclosure变量后Alert Dialog不显示

你的代码存在两个核心问题，直接导致Alert Dialog无法触发显示：

1. 父组件调用子组件的方式错误 #

React组件必须通过JSX标签<ComponentName />的形式渲染，而非直接调用函数ComponentName(...)。直接调用函数会跳过React的状态追踪机制，即便isOpen状态更新，子组件也不会重新渲染，弹窗自然无法显示。

修正后的父组件代码：

const {
  isOpen: isOpen3,
  onOpen: onOpen3,
  onClose: onClose3,
} = useDisclosure();

// 改用JSX标签渲染子组件，将参数以props形式传递
return (
  <StartupComponent
    img={accessories[res.get("selectedAccessory")][1]}
    level={lvl}
    name={startupName}
    id={String(document)}
    isOpen={isOpen3}
    onOpen={onOpen3}
    onClose={onClose3}
    cancelRef={cancelRef}
  />
);

2. 子组件接收props的方式错误 #

React组件的参数是一个props对象，而非独立的多个参数。你之前的写法会导致isOpen、onOpen等变量实际为undefined（参数位置完全不匹配，无法正确接收父组件传递的值）。

修正后的子组件代码：

// 通过解构props对象获取传入的属性
const StartupComponent = ({
  img,
  level,
  name,
  id,
  isOpen,
  onOpen,
  onClose,
  cancelRef
}) => {
  // 确保deleteIt函数已定义，否则点击按钮会报错
  const deleteIt = () => {
    // 此处编写你的删除逻辑
  };

  return (
    <Flex
      direction="row"
      alignItems="center"
      justifyContent="center"
      backgroundColor="#303030"
      width="90%"
      paddingTop={5}
      paddingBottom={5}
      paddingLeft={5}
      borderRadius={3}
      boxShadow="0 5px 5px rgba(0, 0, 0, 0.5)"
      _hover={{
        boxShadow: "0 5px 5px rgba(100,100,100,0.9)",
      }}
    >
      <AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize="lg" fontWeight="bold">
              Delete {name}
            </AlertDialogHeader>

            <AlertDialogBody>
              Are you sure you want to delete {name}? You can't undo this action afterwards.
            </AlertDialogBody>

            <AlertDialogFooter>
              <Button ref={cancelRef} onClick={onClose}>
                Cancel
              </Button>
              <Button
                colorScheme="red"
                onClick={() => {
                  deleteIt();
                  onClose();
                }}
                ml={3}
              >
                Stop Timer
              </Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
      
      <Tooltip label={`Delete ${name}...`} aria-label="A tooltip">
        <Button
          position="absolute"
          right="28vw"
          onClick={onOpen}
          colorScheme="transparent"
        >
          <Image
            src="/assets/trash.png"
            alt="Gloppa menu"
            width={35}
            height={35}
          />
        </Button>
      </Tooltip>
    </Flex>
  );
};

额外优化：子组件中Tooltip的文本用模板字符串${}代替字符串拼接，写法更简洁规范。

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