如何从React useState存储的对象数组中删除与数据库返回列表匹配的元素

时间复杂度优化核心：先将后端返回的players数组转为Set结构，把匹配查找的时间复杂度从O(n)降到O(1)，整体方案总时间复杂度为O(m + n)（n为players数组长度，m为names数组长度），是当前场景下的最优复杂度。

可复用现有遍历逻辑的写法（推荐） #

如果你已经在遍历names数组处理其他逻辑，可以直接复用这次遍历，不需要额外多遍历一次数组：

// 第一步：将需要删除的姓名转成Set，后续查找时间复杂度O(1)
const toDeleteSet = new Set(response.data.players)
const reservedNames = []

// 你现有遍历names给其他hook传值的逻辑
for (const nameItem of names) {
  // 原有给其他hook传值的逻辑保留在此处
  // ...

  // 新增过滤逻辑，收集不需要删除的项
  if (!toDeleteSet.has(nameItem.value)) {
    reservedNames.push(nameItem)
  }
}

// 更新state
setNames(reservedNames)

简化写法（无现有遍历时使用） #

如果不需要复用遍历逻辑，可以直接用filter实现，代码更简洁：

const toDeleteSet = new Set(response.data.players)
setNames(prev => prev.filter(item => !toDeleteSet.has(item.value)))

注意：如果直接用response.data.players.includes(item.value)做判断，整体时间复杂度会升至O(m*n)，数据量较大时性能差距非常明显，因此优先推荐转Set的实现方案。

内容的提问来源于stack exchange，提问作者SEMER BEN SALEM