React中实现嵌套数组状态的选中新增与重复删除切换功能

解决方案 #

问题原因 #

原有代码检测到值已存在于对应数组时，直接返回了原状态，没有执行删除操作，同时初始state的键名one/two和更新逻辑中使用的first/second不匹配，需要先统一。

修正后代码 #

首先修正state定义，和后续逻辑的键名统一：

const [filterTags, setFilterTags] = useState({ first: [], second: [] });

修改后的updateValue方法：

const updateValue = (val) => {
  setFilterTags((prev) => {
    const key = ['A', 'B'].includes(val) ? 'first' : 'second';
    return prev[key].includes(val) 
      // 已存在则过滤掉当前值
      ? { ...prev, [key]: prev[key].filter(item => item !== val) }
      // 不存在则追加新值
      : { ...prev, [key]: [...prev[key], val] };
  });
};

逻辑说明 #

• 用数组includes判断值归属的数组，比多次全等判断更易维护
• 当值已存在时，通过filter生成排除当前值的新数组，替换原有数组
• 所有状态更新都返回新对象，符合React不可变数据的要求，不会出现状态不刷新的问题
• 按测试用例A C C D B A E C依次传入，最终输出和给出的预期完全一致

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