JavaScript对象中堆叠筛选值功能失效问题

首先，我猜你大概率遇到的是旧筛选器值被意外覆盖/清除的情况——这种问题在处理多筛选器状态时特别常见，我帮你梳理几个最可能的原因和解决办法：

1. 没有正确复用原有状态对象 #

很多人会犯的错是每次更新筛选器时，直接创建新对象而非基于原有对象扩展，比如：

// 错误写法：直接覆盖整个对象，丢失原有筛选器值
function updateFilters(newFilter) {
  return { [newFilter.key]: newFilter.values };
}

正确的做法应该是用对象扩展运算符或者Object.assign保留原有值：

// 正确写法：复用原有状态，只更新当前筛选器的值
function updateFilters(currentFilters, newFilter) {
  return {
    ...currentFilters,
    [newFilter.key]: newFilter.values
  };
}

2. 筛选器值为空时误清空对应属性 #

如果用户取消某个筛选器的所有选择，别不小心把该属性从对象中删除，建议即使值为空数组也保留属性：

// 不推荐：值为空时删除属性
if (newFilter.values.length === 0) {
  const { [newFilter.key]: _, ...rest } = currentFilters;
  return rest;
}

// 推荐：值为空时保留空数组，确保筛选器状态始终存在
return {
  ...currentFilters,
  [newFilter.key]: newFilter.values
};

3. 状态更新时的引用问题 #

要是在React、Vue这类框架里用这个函数，别直接修改原状态对象，必须返回新引用才能触发更新：

// React错误写法：直接修改原状态，导致更新失效
const handleFilterChange = (newFilter) => {
  setFilters(prev => {
    prev[newFilter.key] = newFilter.values;
    return prev; // 引用未变，React不会更新
  });
};

// React正确写法：返回新对象触发更新
const handleFilterChange = (newFilter) => {
  setFilters(prev => ({
    ...prev,
    [newFilter.key]: newFilter.values
  }));
};

4. 筛选器键名不匹配 #

检查下你传入的筛选器键名（比如category、priceRange）和对象中存储的键名是否完全一致，大小写、拼写错误都会导致旧值没被保留。

如果这些都不是你的问题，可以把你的函数代码贴出来，我帮你精准定位~

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