Ant Design Collapse删除面板后activeKey未同步，后续面板意外展开如何解决

• 你当前使用index作为Panel的key值，删除数组元素后后续元素的索引会整体前移，导致原有key和面板的对应关系错乱。
• 未对Collapse的activeKey做受控管理，组件内部默认维护的激活状态无法和删除后的列表同步，手风琴模式下就会出现后续面板被误激活的问题。

1. 将Panel的key替换为业务唯一标识offer.OfferID，避免索引变动带来的key错乱
2. 新增activeKey受控状态，绑定到Collapse组件
3. 删除列表项时同步校验，若删除的是当前激活的面板，同步重置activeKey

import { useState } from 'react';
import { Collapse, Button } from 'antd';
import { MinusOutlined } from '@ant-design/icons';

const { Panel } = Collapse;

const YourComponent = () => {
  const [RecievedOffers, setRecievedOffers] = useState([]);
  // 新增受控activeKey，手风琴模式下为字符串/undefined，非手风琴模式为数组
  const [activeKey, setActiveKey] = useState(undefined);

  const renderRecievedOffers = (Offers) => Offers.map((offer) => (
    // 把key从index替换为唯一业务ID
    <Panel header={'Test'} key={offer.OfferID}>
       ..some other things
       <Button 
         shape="circle" 
         icon={<MinusOutlined />} 
         size="medium" 
         onClick={() => handleRecievedOfferDecline(offer.OfferID)} 
       />
    </Panel>
  ));

  const handleRecievedOfferDecline = async (offerId) => {
    let newRecievedOffers = RecievedOffers.filter( (offer) => offer.OfferID !== offerId);
    setRecievedOffers([...newRecievedOffers]);
    // 同步更新activeKey：如果删除的是当前激活的面板，重置激活状态
    if (activeKey === offerId.toString()) {
      setActiveKey(undefined);
    }
  };

  return (
    // 绑定activeKey和onChange回调，实现受控管理
    <Collapse 
      accordion 
      activeKey={activeKey} 
      onChange={setActiveKey}
    >
      {renderRecievedOffers(RecievedOffers)}
    </Collapse>
  );
};

如果使用的是非手风琴模式（可同时打开多个面板），只需要调整activeKey的格式和更新逻辑即可：

// 初始值改为数组
const [activeKey, setActiveKey] = useState([]);
// 删除时的逻辑改为过滤掉被删除的ID
setActiveKey(prev => prev.filter(key => key !== offerId.toString()));

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