React应用中使用.filter()删除元素时重复项误删问题求助

你的核心问题是通过值匹配过滤数组会删除所有相同值的项，同时现有代码里的key设置也存在错误（用props.fullListState[x]会导致重复或无效key），下面给出两种可靠的解决方案：

方案一：通过索引删除（简单场景适用） #

利用数组的索引作为唯一标识，删除时仅移除对应索引的项：

1. 修改列表渲染的map方法，同时获取元素和索引：

{props.fullListState.length > 0 ? props.fullListState.map((x, index) => {
  return <div className="form-list-input-container" key={index}>
    <p className="form-list-input-paragraph">{x}</p>
    <button className="form-list-delete-button" onClick={() => deleteFromList(index)}>Delete</button>
  </div>
}) : null}

2. 更新deleteFromList函数，通过索引过滤：

const deleteFromList = (indexToDelete) => {
  // 使用函数式更新确保拿到最新的状态
  props.setFullListState(full => full.filter((_, index) => index !== indexToDelete))
}

方案二：给列表项添加唯一ID（推荐，健壮性更高） #

如果后续涉及列表排序、插入等操作，索引会发生变化，此时给每个项绑定唯一ID是更可靠的方案：

1. 修改addToList函数，将值包装成带唯一ID的对象：

const addToList = () => {
  const current = props.currentListState
  if (!current.trim()) return // 避免添加空内容
  props.setFullListState(full => [...full, { id: Date.now(), value: current }])
  props.setCurrentListState('')
}

2. 更新列表渲染逻辑，基于对象的id和value处理：

{props.fullListState.length > 0 ? props.fullListState.map(item => {
  return <div className="form-list-input-container" key={item.id}>
    <p className="form-list-input-paragraph">{item.value}</p>
    <button className="form-list-delete-button" onClick={() => deleteFromList(item.id)}>Delete</button>
  </div>
}) : null}

3. 修改deleteFromList函数，通过唯一ID过滤：

const deleteFromList = (idToDelete) => {
  props.setFullListState(full => full.filter(item => item.id !== idToDelete))
}

额外注意点 #

• 原代码中key={props.fullListState[x]}是错误的：当x是字符串值时，props.fullListState[x]会尝试按字符串索引取数组元素，大概率得到undefined，导致React渲染警告，必须确保key是唯一且稳定的值。
• 尽量使用函数式更新（setState(prev => ...)）修改状态，避免闭包导致的旧状态引用问题。

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