React Hook场景下如何实现对象内数组更新并保留唯一值

问题原因 #

你原有代码的核心问题如下：

1. 直接把单个val赋值给one/two字段，没有用数组结构存储，所以只能保留单个值
2. 没有判断传入值是否已经存在于对应数组中，无法实现去重逻辑
3. 直接展开filterTags的写法可能遇到闭包陷阱，无法保证拿到最新的state值

修改后代码 #

// 提前将可选值抽为常量，方便后续维护调整
const LIST1 = ['A', 'B']
const LIST2 = ['C', 'D', 'E', 'F']

const updateValue = (val) => {
  // 使用函数式更新，确保每次计算基于最新的state
  setFilterTags(prev => {
    if (LIST1.includes(val)) {
      // 对应数组已存在该值则直接返回原state，不做无效更新
      if (prev.one.includes(val)) return prev
      return {
        ...prev,
        one: [...prev.one, val]
      }
    } else if (LIST2.includes(val)) {
      if (prev.two.includes(val)) return prev
      return {
        ...prev,
        two: [...prev.two, val]
      }
    }
    // 不在两个可选列表内的值直接返回原state
    return prev
  })
}

逻辑说明 #

• 函数式更新的写法规避了闭包问题，连续调用更新时也能保证state计算正确
• 新增值前先做存在性校验，天然实现数组去重需求
• 用展开运算符保留原数组的已有内容，再追加新值，保证数组存储结构符合预期
• 可选值抽为常量后，后续调整可选列表时只需修改常量定义，无需调整判断逻辑

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