Chakra UI中forEach循环内使用useDisclosure()的问题求助

你当前的问题根源很明确：用了单个useDisclosure实例，所有模态框都绑定同一个isOpenEdit状态。一旦点击任意按钮触发onOpenEdit，这个状态变为true，所有模态框都会跟着打开。

下面给两种实用的解决方法：

方法一：抽成独立子组件 #

把每行的编辑按钮和对应模态框封装成单独组件，让每个组件自己管理useDisclosure状态，这样各行的状态完全隔离，互不影响。

子组件代码 #

import { Button, ButtonGroup, useDisclosure } from '@chakra-ui/react';

const EditRow = ({ row }) => {
  // 每个子组件单独调用useDisclosure，拥有独立状态
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <ButtonGroup isAttached>
      <Button onClick={onOpen}>Edit</Button>
      <EditModal isOpen={isOpen} onClose={onClose} id={row.id} />
    </ButtonGroup>
  );
};

父组件修改 #

移除原来的useDisclosure调用，直接在循环里使用子组件：

// 父组件中删除这一行
// const {isOpen:isOpenEdit,onOpen:onOpenEdit,onClose:onCloseEdit} = useDisclosure();

// ...

<Td>
  <EditRow row={row} />
</Td>

方法二：父组件维护当前编辑ID #

在父组件里用状态记录当前要编辑的行ID，模态框的isOpen只在当前行ID匹配时才为true。

父组件代码修改 #

import { useState } from 'react';

// 父组件中添加状态
const [editingId, setEditingId] = useState(null);

// ...

<Td>
  <ButtonGroup isAttached>
    <Button onClick={() => setEditingId(row.id)}>Edit</Button>
    <EditModal 
      isOpen={editingId === row.id} 
      onClose={() => setEditingId(null)} 
      id={row.id} 
    />
  </ButtonGroup>
</Td>

两种方案各有优势：子组件方式更符合组件化设计，代码结构更清晰；父组件维护ID的方式不需要额外组件，适合简单场景，按需选择就行。

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