React中如何为数组映射渲染的组件设置独立状态？

出现全量组件同步显隐的核心原因是：所有通过map渲染的Popover组件，都共用了同一个布尔类型的visible状态。布尔值仅能存储「开/关」二元状态，无法标记具体哪个组件需要触发显隐，一旦状态更新，所有绑定该状态的组件都会同步响应，自然出现同时开关的问题。

原问题实现代码参考：

const App = () => {
  const dummyData = ["Select One", "Select Two", "Select Three"];
  const [visible, setVisible] = React.useState(false);
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {dummyData.map((data) => (
        <Popover
          visible={visible}
          onVisibleChange={(newVisible) => setVisible(newVisible)}
          content={
            <Select
              defaultValue="lucy"
              style={{
                width: 120
              }}
            >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </Select>
          }
          title=""
          trigger="click"
        >
          <Button>{data}</Button>
        </Popover>
      ))}
    </div>
  );
};

注：上述场景中Popover的渲染数据实际来自后端接口返回。

根据交互需求二选一即可：

方案1：存储激活项唯一标识（推荐） #

如果交互要求同一时间仅展示一个Popover（常规下拉、气泡提示的默认交互），把原来的布尔状态替换为存储当前激活项的唯一标识（数组索引、数据id均可），仅当当前项标识和状态存储值一致时才展示Popover。

const App = () => {
  const dummyData = ["Select One", "Select Two", "Select Three"];
  // 默认值为null代表无激活项，所有Popover关闭
  const [activePopoverKey, setActivePopoverKey] = React.useState(null);
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {dummyData.map((data, index) => (
        <Popover
          // 仅当前项索引匹配激活值时展示
          visible={activePopoverKey === index}
          onVisibleChange={(newVisible) => {
            // 打开时存入当前项标识，关闭时重置为null
            setActivePopoverKey(newVisible ? index : null)
          }}
          content={
            <Select
              defaultValue="lucy"
              style={{
                width: 120
              }}
            >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </Select>
          }
          title=""
          trigger="click"
        >
          <Button>{data}</Button>
        </Popover>
      ))}
    </div>
  );
};

该方案状态集中管理，渲染性能更好，适配接口返回动态列表的场景。

方案2：抽离单组件内聚状态 #

如果业务需要支持同时打开多个Popover，可将单个Popover封装为独立组件，每个组件内部维护自己的显隐状态，组件间状态完全隔离，不会互相干扰。

// 单个Popover项独立维护自身状态
const IndependentPopover = ({ btnText }) => {
  const [visible, setVisible] = React.useState(false);
  return (
    <Popover
      visible={visible}
      onVisibleChange={setVisible}
      content={
        <Select
          defaultValue="lucy"
          style={{
            width: 120
          }}
        >
          <Option value="jack">Jack</Option>
          <Option value="lucy">Lucy</Option>
        </Select>
      }
      title=""
      trigger="click"
    >
      <Button>{btnText}</Button>
    </Popover>
  )
}

const App = () => {
  const dummyData = ["Select One", "Select Two", "Select Three"];
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {dummyData.map((data, index) => (
        <IndependentPopover key={index} btnText={data} />
      ))}
    </div>
  );
};

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