Isotope多筛选器组合问题及状态同步故障（基于Ramda）

Hey there! Let's break down and solve your two Isotope filter issues step by step:

React 的 setState 是异步批量更新的，这意味着你在调用 setState 后立刻打印 this.state，看到的还是更新前的旧状态——这就是为什么你的状态树总是滞后一步。

解决方案： #

有两种可靠的方式确保你在状态更新完成后执行筛选逻辑：

方式一：使用 setState 的回调参数

把你的 multiFilterIsotope 调用放在 setState 的第二个回调参数里，这个回调会在状态更新完成后触发：

handleFilterChange = (filterKey, selectedValues) => {
  this.setState(
    { [`filteredOption_${filterKey}`]: selectedValues },
    () => {
      // 这里的 state 已经是最新的了
      this.multiFilterIsotope();
    }
  );
}

方式二：利用 componentDidUpdate 生命周期

如果你的筛选触发逻辑比较复杂，可以在 componentDidUpdate 里监听筛选状态的变化，当状态改变时自动执行筛选：

componentDidUpdate(prevProps, prevState) {
  // 检查两个筛选器的状态是否有变化
  const hasFilterChanged = 
    prevState.filteredOption_statuspromo !== this.state.filteredOption_statuspromo ||
    prevState.filteredOption_regionspromo !== this.state.filteredOption_regionspromo;

  if (hasFilterChanged) {
    this.multiFilterIsotope();
  }
}

这样只要筛选状态更新，就会自动触发正确的筛选逻辑。

你现在的嵌套循环只能处理两个筛选器的情况，扩展性很差。我们可以用笛卡尔积来生成所有筛选条件的组合，完美实现 AND 逻辑，而且代码更简洁通用。

方案一：用 Ramda 简化实现 #

Ramda 的 xprod 方法可以直接生成两个数组的笛卡尔积，配合 reduce 可以处理任意数量的筛选器：

import * as R from 'ramda';

multiFilterIsotope = () => {
  const availableFilters = ['statuspromo', 'regionspromo'];
  
  // 整理出所有非空的筛选组，每个值前加上 .
  const filterGroups = availableFilters
    .map(filter => this.state[`filteredOption_${filter}`])
    .filter(Boolean) // 过滤掉未选择任何值的筛选器
    .map(group => group.map(val => `.${val}`));

  // 如果没有任何筛选条件，显示全部内容
  if (filterGroups.length === 0) {
    this.state.iso.arrange({ filter: '*' });
    return;
  }

  // 计算所有筛选组的笛卡尔积，拼接成需要的选择器字符串
  const merged = R.reduce(
    (acc, group) => R.xprod(acc, group).map(pair => pair.join('')),
    [''] // 初始值确保第一个组的元素能直接拼接
  )(filterGroups);

  const opts = merged.join(',');
  this.state.iso.arrange({ filter: opts });
}

方案二：原生 JS 实现（无需依赖 Ramda） #

如果你不想引入 Ramda，也可以自己实现一个简单的笛卡尔积函数：

// 原生 JS 笛卡尔积工具函数
const cartesianProduct = (...arrays) => {
  return arrays.reduce((acc, curr) => {
    return acc.flatMap(prev => curr.map(currVal => [...prev, currVal]));
  }, [[]]);
};

multiFilterIsotope = () => {
  const availableFilters = ['statuspromo', 'regionspromo'];
  
  const filterGroups = availableFilters
    .map(filter => this.state[`filteredOption_${filter}`])
    .filter(Boolean)
    .map(group => group.map(val => `.${val}`));

  if (filterGroups.length === 0) {
    this.state.iso.arrange({ filter: '*' });
    return;
  }

  // 生成笛卡尔积后拼接成选择器
  const merged = cartesianProduct(...filterGroups).map(combination => combination.join(''));
  const opts = merged.join(',');
  this.state.iso.arrange({ filter: opts });
}

这两种方案都能自动处理任意数量的筛选器，比如以后加第三个筛选器，只需要把它加入 availableFilters 数组即可，完全不用修改组合逻辑。

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