React中Array Map渲染的下拉菜单共用toggle同时开关，如何实现独立控制？

核心思路：废弃全局共用的布尔值状态，改为存储当前处于展开状态的下拉的唯一标识，通过比对当前渲染项的标识与存储值，单独控制每个下拉的展开收起状态。

具体改造步骤 #

• 第一步：替换原有状态定义
  把原先控制下拉展开的布尔状态：

  const [dropdownOpen, setDropdownOpen] = useState(false)
  

  替换为存储唯一标识的状态：

  // null 代表当前没有下拉处于展开状态
  const [openDropdownKey, setOpenDropdownKey] = useState(null)
  

• 第二步：新增带参数的toggle方法
  替换原有全局toggle方法，新增接收当前下拉唯一标识的逻辑：

  const toggleDropdown = (currentKey) => {
    // 如果点击的是已经展开的下拉则收起，否则展开当前点击的下拉
    setOpenDropdownKey(prevState => prevState === currentKey ? null : currentKey)
  }
  

• 第三步：修改循环渲染时的属性绑定
  在displayTeam.map循环内，修改ButtonDropdown组件的isOpen和toggle属性绑定逻辑：

  {/* ===== Display Your Team Begin Code ===== */}
  {displayTeam.map((list, i) => (
    <Card body outline style={{outlineColor: 'grey', backgroundColor:'#EBEBEB', width:'220px', float:'left', margin:'20px'}} key={i}>
      <Row xs="2" md="2" sm="auto">
        <CardTitle tag="h6"><b>{list.team}</b></CardTitle>
        <div>
          <ButtonDropdown 
            style={{float:'right', backgroundImage:'../assets/TitikTiga.png', backgroundColor:'white', border:'0px'}} 
            isOpen={openDropdownKey === i} 
            toggle={() => toggleDropdown(i)}
          >
            <DropdownToggle style={{border:'0px', borderRadius:'0px', backgroundColor:'transparent'}}>
              <FontAwesomeIcon icon={faEllipsisV} style={{color:'black'}}/>
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem onClick={modalToggleEditTeam}>Edit team</DropdownItem>
              {/* 其余下拉项代码保持不变 */}
            </DropdownMenu>
          </ButtonDropdown>
        </div>
      </Row>
    </Card>
  ))}
  

优化建议 #

如果displayTeam数组的每一项存在唯一业务ID（比如list.id），推荐用业务ID代替数组索引作为标识，同时替换map循环的key属性为list.id，避免数组排序、增删项时出现状态绑定错乱的问题。

内容的提问来源于stack exchange，提问作者Ahmad Irfan Effendi