React中列表项绑定Modal点击后打开所有弹窗的问题如何解决

你所有列表项共用了父组件同一个布尔类型的弹窗开关状态，只要状态变更为true，所有列表项绑定的isModalOpen属性都会变为真值，因此会同时弹出所有Modal。

有两种常用的实现方案，按需选择即可：

方案1：父组件存储当前激活弹窗的唯一标识 #

把原有的布尔类型开关状态，替换为存储当前点击项的唯一ID，通过ID匹配判断对应Modal是否展示：

1. 修改父组件状态定义与toggle方法：

// 原代码
const [isShowing, setIsShowing] = useState(false);
const toggle = () => setIsShowing(!isShowing);

// 修改后
// 假设你的dimension对象有唯一标识字段id，可根据实际字段名替换
const [activeModalId, setActiveModalId] = useState<string | null>(null);
const toggle = (dimensionId: string) => {
  // 如果点击的是当前已打开的弹窗ID，就关闭弹窗，否则打开对应ID的弹窗
  setActiveModalId(prev => prev === dimensionId ? null : dimensionId);
};

2. 修改列表渲染逻辑：

{/* 循环渲染列表项时修改属性绑定 */}
{dimensions.map(dimension => (
  <div key={dimension.id}>
    <FiltersAddition
      dimension={dimension}
      isModalOpen={activeModalId === dimension.id}
      toggle={() => toggle(dimension.id)}
    />
    <Button onClick={() => toggle(dimension.id)}> Instantiate </Button>
  </div>
))}

方案2：封装独立列表项组件，状态内聚 #

将单个列表项的逻辑封装为独立组件，每个组件内部维护自己的弹窗开关状态，组件之间状态完全隔离，不会互相干扰：

1. 封装独立子组件：

// 按实际类型替换DimensionType
const DimensionItem = ({ dimension }: { dimension: DimensionType }) => {
  const [isShowing, setIsShowing] = useState(false);
  const toggle = () => setIsShowing(!isShowing);

  return (
    <div>
      <FiltersAddition
        dimension={dimension}
        isModalOpen={isShowing}
        toggle={toggle}
      />
      <Button onClick={toggle}> Instantiate </Button>
    </div>
  );
};

2. 父组件直接循环调用子组件即可：

{dimensions.map(dimension => (
  <DimensionItem key={dimension.id} dimension={dimension} />
))}

列表循环的key属性必须使用每个项的唯一值，不要用数组索引，避免重渲染时出现状态错乱。

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