React数组筛选功能失效，请求排查问题原因

问题分析 #

你的代码存在两个核心问题导致筛选器无法正常移除：

• 异步状态更新冲突：添加非"All"筛选器时连续两次调用setFiltersApplied，React状态更新是异步的，第二次更新会基于旧状态执行，导致逻辑失效。
• 数组操作错误：移除筛选器时，filter方法返回新数组但不会修改原数组，你未将过滤结果赋值给变量，原数组根本没有变化。

修复后的完整代码 #

function FilterGroup({ filterData }) {
  const [filtersApplied, setFiltersApplied] = useState(["All"]);

  const filterListItemElements = filterData.map((el, index) => (
    <button
      className={`text-white ${filtersApplied.includes(el) ? '' : 'text-opacity-30 hover:text-opacity-70'}  pl-0.5 text-xs block w-full cursor-pointer`}
      key={index}
      onClick={() => handleFilterClick(el)}
      aria-pressed={filtersApplied.includes(el)}
    >
      {el}
    </button>
  ));

  function handleFilterClick(val) {
    if (!filtersApplied.includes(val)) {
      // 添加筛选器逻辑
      if (val === "All") {
        setFiltersApplied(["All"]);
      } else {
        // 函数式更新，基于最新状态修改
        setFiltersApplied(prev => {
          const withoutAll = prev.filter(name => name !== "All");
          return [...withoutAll, val];
        });
      }
    } else {
      // 移除筛选器逻辑
      if (val === "All") return;

      const filtered = filtersApplied.filter(name => name !== val);
      setFiltersApplied(filtered.length === 0 ? ["All"] : filtered);
    }
  }

  return <div>{filterListItemElements}</div>;
}

关键修复点说明 #

• 合并状态更新：添加非"All"筛选器时改用函数式setState，在单个更新操作里完成移除"All"和添加新元素的逻辑，避免异步状态不一致问题。
• 正确使用数组过滤：移除元素时直接接收filter返回的新数组，确保状态更新的是修改后的正确数组。
• 简化空数组判断：过滤后直接检查新数组长度，为空则重置为["All"]，逻辑更简洁直观。

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