Modal组件中加减计数器无法识别父组件状态的解决方法

问题根源 #

你使用的modals.openConfirmModal是函数调用式模态框，它会创建一个独立于当前组件树的DOM节点（通常挂载在body下）。当调用openModal时，children中的内容是基于当时count值的静态快照，后续父组件的count更新无法触发模态框内容重新渲染——因为模态框不在ProgramCard的渲染周期内。

解决方案 #

方法一：改用组件式Modal（推荐） #

使用框架提供的组件式Modal（比如Chakra UI的Modal组件），将其嵌入到ProgramCard的组件树中，这样状态变化会自动触发模态框重新渲染：

export default function ProgramCard() {
  const [count, setCount] = useState(0);
  const handleIncrement = () => setCount(prev => prev + 1);
  const handleDecrement = () => setCount(prev => prev - 1);
  const { isOpen, onOpen, onClose } = useDisclosure(false);

  return (
    <Grid.Col span={2}>
      <Paper shadow="xs" radius="md" p="sm">
        <Text fw={700}>Sample</Text>
        <br />
        <Space h="xs" />
        <Button variant={'light'} radius="xl" size="xs" onClick={onOpen}>
          Record
        </Button>

        {/* 组件式Modal，随父组件状态更新自动渲染 */}
        <Modal isOpen={isOpen} onClose={onClose}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>Input Data</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <Button onClick={handleDecrement}>-</Button>{"  #  "}{count}{"  #  "}
              <Button onClick={handleIncrement}>+</Button>
            </ModalBody>
            <ModalFooter>
              <Button variant="ghost" onClick={onClose}>Cancel</Button>
              <Button colorScheme="blue" onClick={() => {
                notifications.show({
                  title: 'Input Submitted',
                  message: 'Complete',
                });
                onClose();
              }}>Confirm</Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      </Paper>
    </Grid.Col>
  )
}

方法二：用Ref跟踪最新状态（兼容函数调用式Modal） #

如果必须保留函数调用式的模态框，可以通过useRef跟踪最新的count值，手动更新模态框内的DOM内容：

export default function ProgramCard() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  
  // 同步Ref与State，确保Ref始终保存最新值
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  const handleIncrement = () => setCount(prev => prev + 1);
  const handleDecrement = () => setCount(prev => prev - 1);

  const openModal = () => {
    // 手动更新模态框中的计数显示
    const updateCountDisplay = () => {
      const countElement = document.querySelector('#modal-count');
      if (countElement) countElement.textContent = countRef.current;
    };

    // 包装增减函数，执行后更新显示
    const modalIncrement = () => {
      handleIncrement();
      updateCountDisplay();
    };

    const modalDecrement = () => {
      handleDecrement();
      updateCountDisplay();
    };

    modals.openConfirmModal({
      title: 'Input Data',
      children: (
        <div>
          <Button onClick={modalDecrement}>-</Button>{"  #  "}
          <span id="modal-count">{countRef.current}</span>{"  #  "}
          <Button onClick={modalIncrement}>+</Button>
        </div>
      ),
      labels: { confirm: 'Confirm', cancel: 'Cancel' },
      onCancel: () => console.log('Cancel'),
      onConfirm: () => notifications.show({
        title: 'Input Submitted',
        message: 'Complete',
      }),
    });
  };

  return (
    <Grid.Col span={2}>
      <Paper shadow="xs" radius="md" p="sm">
        <Text fw={700}>Sample</Text>
        <br />
        <Space h="xs" />
        <Button variant={'light'} radius="xl" size="xs" onClick={openModal}>
          Record
        </Button>
      </Paper>
    </Grid.Col>
  )
}

方案对比 #

• 组件式Modal：符合React的状态驱动渲染理念，代码更简洁易维护，是优先选择的方案。
• Ref手动更新：适合无法替换模态框组件的场景，但需要手动操作DOM，代码复杂度更高。

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