如何修改代码移除同ID旧对象，实现chart base64图片更新？

我需要维护一组图表的Base64数据，期望新添加的图表能替换掉旧的、拥有相同ID的图表对象。但目前的代码只能新增对象，无法移除重复ID的旧对象，麻烦帮忙修改代码实现这个需求。

示例数据（期望最终保留id="abc"的新对象，删除旧的同ID对象）：

[
   {
      "id":"abc",
      "base": "sadasdasdasdasdasdasdasdsadsda"
   },
   {
      "id":"bcd",
      "base": "sadasdasdasdasdasdasdasdsadsda"
   },
   {
      "id":"abc",
      "base": "IwantToKeepThisAndDeleteThePreviousObjectWithTheSameId"
   }
]

当前无法实现需求的代码：

setChartImages((prevState) => { return [...prevState.filter(item => 
item?.image !== chart?.toBase64Image()), 
{id: id, image: chart?.toBase64Image()}] })

你之前的过滤逻辑错误地对比了Base64内容，而我们需要的是根据ID匹配并移除旧对象。以下是两种可行的修改方案：

方案1：过滤旧ID后追加新对象（新对象放数组末尾） #

setChartImages((prevState) => {
  // 过滤掉所有与当前ID重复的旧条目
  const filteredOldItems = prevState.filter(item => item.id !== id);
  // 追加新的图表对象
  return [...filteredOldItems, { id: id, image: chart?.toBase64Image() }];
});

方案2：遍历替换同ID对象（保留原数组位置） #

如果希望新对象替换旧对象后保持原有的数组位置，可以使用map遍历：

setChartImages((prevState) => {
  return prevState.map(item => 
    // 匹配到相同ID时替换为新对象，否则保留原条目
    item.id === id ? { id: id, image: chart?.toBase64Image() } : item
  );
});

说明 #

• 方案1会先删除所有同ID旧对象，再把新对象加到数组最后，适合不关心位置的场景
• 方案2直接在原位置替换同ID对象，适合需要保持数组顺序的场景

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