Reduce方法修改externalUrl触发状态突变错误求助

你遇到的错误是因为在reduce里直接修改了原数组allCarouselItems中的元素对象——carouselItem.externalUrl = url这行代码直接改动了原状态里的对象，违反了Redux（或同类状态管理库）要求的不可变状态原则，导致状态变更检测逻辑触发了报错。

修正方案 #

核心是不修改原对象，而是创建新对象来承载修改后的属性，修改后的代码如下：

const filteredCarouselItems = allCarouselItems?.reduce(
  (acc, carouselItem) => {
    if (carouselItem.cardType === 'mobileMechanic') {
      const url = carouselItem.externalUrl
        ?.replace('{vrn}', smrDetails?.vrn?.toString() || '')
        .replace('{postCode}', smrDetails?.postCode?.toString() || '');
      
      // 用扩展运算符复制原对象属性，替换externalUrl，生成新对象
      const updatedItem = { ...carouselItem, externalUrl: url };
      return [...acc, updatedItem];
    }

    // 无需修改的项直接加入累加器
    return [...acc, carouselItem];
  },
  [] as CarouselItem[],
);

补充说明 #

• 扩展运算符...实现了对象的浅拷贝，只会复制顶层属性，对于当前场景完全够用；如果CarouselItem包含嵌套对象，需要用深拷贝（比如structuredClone）来保证完全不可变。
• 这种方式所有状态变更都通过生成新对象/数组完成，不会触发原状态的突变，符合状态管理库的要求。

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