Ant design 折叠面板在状态更改后保持打开状态

Question

我遇到了 ant design collapse 的问题，我无法解决。我有一个状态数组中的报价列表。我为每个项目动态创建了一个面板。如果我们打开这个面板，它包含一个按钮。单击按钮后，我会从我的状态中删除特定项目。直到此时工作正常，状态被更新并且面板项被渲染而不包含被删除的项。

但是问题来了：如果我们在后面有其他面板的面板上单击删除按钮，即使关闭了下面的面板也会打开。状态更新但折叠的活动键由于某种原因保持不变。

问题：如果项目被删除，我如何更新活动密钥？谢谢。

我的代码：

const [RecievedOffers, setRecievedOffers] = useState([])

const renderRecievedOffers = (Offers) => Offers.map((offer, index) => {
<Panel header={'Test'} key={index}>
       ..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])
}

return (
 <Collapse accordion>
 {renderRecievedOffers(RecievedOffers)}
</Collapse>)

提前致谢

Answer 1

发生这种情况是因为地图的 index 被用作面板列表的键。当项目的顺序发生变化时，这可能会导致列表状态出现问题，就像您的情况一样。不建议对键使用索引，如 React docs.

中所述和解释的那样

由于您在 offer 对象上进行映射，您可以使用它们的 OfferID 作为列表的键，这应该可以解决您的问题。

Ant design 折叠面板在状态更改后保持打开状态

Ant design collapse panel remains open after state change

javascript

reactjs

antd