React中同键多值状态变量的增删查实现方案及最优选择

嘿，我来梳理下这个需求的几种实现思路，以及哪种最适合你的场景～

首先得明确：咱们要存储的是同键可以对应多个不同值的条目，所以state的结构设计是核心，不同的结构会直接影响增删查的实现复杂度和效率。

方式一：用数组存储所有条目（扁平结构） #

这种方式把所有条目都放进一个数组里，每条是包含key和value的对象，结构简单直观，适合需要保留条目添加顺序的场景。

初始化State #

在constructor里这样定义：

constructor(props) {
  super(props);
  this.state = {
    items: [
      { key: 'abc', value: 123 },
      { key: 'abc', value: 456 },
      { key: 'abc', value: 349 },
      { key: 'def', value: 378 },
      { key: 'def', value: 348 },
      { key: 'xyz', value: 123 },
      { key: 'xyz', value: 234 }
    ]
  };
}

核心功能实现 #

• 检查条目是否存在：用数组的some方法遍历匹配

  checkItemExists = (key, value) => {
    return this.state.items.some(item => item.key === key && item.value === value);
  };
  

• 插入新条目：先检查是否存在，不存在则添加

  insertItem = (key, value) => {
    if (!this.checkItemExists(key, value)) {
      this.setState(prevState => ({
        items: [...prevState.items, { key, value }]
      }));
    }
  };
  

• 删除指定条目：过滤掉匹配的条目

  deleteItem = (key, value) => {
    if (this.checkItemExists(key, value)) {
      this.setState(prevState => ({
        items: prevState.items.filter(item => !(item.key === key && item.value === value))
      }));
    }
  };
  

方式二：用对象分组存储（结构化） #

这种方式把相同key的条目归到同一数组下，state是一个以abc/def/xyz为键、对应值数组为值的对象。这种结构的增删查效率更高，因为不需要遍历所有条目，只操作对应key的数组即可。

初始化State #

constructor(props) {
  super(props);
  this.state = {
    groupedItems: {
      abc: [123, 456, 349],
      def: [378, 348],
      xyz: [123, 234]
    }
  };
}

核心功能实现 #

• 检查条目是否存在：直接检查对应key的数组里是否包含目标值

  checkItemExists = (key, value) => {
    const group = this.state.groupedItems[key];
    return group ? group.includes(value) : false;
  };
  

• 插入新条目：先判断key是否存在，不存在则创建新数组，再检查值是否存在，不存在则添加

  insertItem = (key, value) => {
    if (!this.checkItemExists(key, value)) {
      this.setState(prevState => ({
        groupedItems: {
          ...prevState.groupedItems,
          [key]: prevState.groupedItems[key] 
            ? [...prevState.groupedItems[key], value]
            : [value]
        }
      }));
    }
  };
  

• 删除指定条目：过滤对应key数组里的目标值，若数组为空可以选择删除该key（可选）

  deleteItem = (key, value) => {
    if (this.checkItemExists(key, value)) {
      this.setState(prevState => {
        const updatedGroup = prevState.groupedItems[key].filter(v => v !== value);
        const newGroupedItems = { ...prevState.groupedItems };
        // 如果数组为空，可选择删除该key，避免空数组占用空间
        if (updatedGroup.length === 0) {
          delete newGroupedItems[key];
        } else {
          newGroupedItems[key] = updatedGroup;
        }
        return { groupedItems: newGroupedItems };
      });
    }
  };
  

哪种方式最优？ #

这得看你的具体使用场景，但方式二（分组对象）通常是更优的选择，原因如下：

1. 效率更高：增删查操作只需要针对对应key的数组，无需遍历所有条目，尤其是当条目数量较多时，性能差距会很明显；
2. 代码更简洁：检查和操作逻辑更直接，不需要处理全数组的遍历；
3. 结构更清晰：相同key的条目归类在一起，便于后续针对特定key做批量操作（比如获取某个key的所有值）。

如果你的需求里有严格需要保留条目添加顺序的场景，或者经常需要跨key做全局筛选，那方式一更合适；否则优先选方式二。

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