React中切换宝可梦捕获状态时无法从已捕获数组删除项如何解决

出错原因 #

• 错误使用filter返回值：filter方法返回的是符合匹配条件的宝可梦对象数组，不是元素所在的索引值，你把这个结果作为splice的起始位置参数，本身就无法定位到要删除的元素
• 误用splice返回值：splice执行后返回的是被删除的元素组成的数组，你直接把这个返回值赋值给已捕获数组，相当于把已捕获列表替换成了刚删掉的内容，逻辑完全颠倒
• 隐藏问题：取消勾选时直接往未捕获数组追加元素，重复切换复选框状态会导致未捕获数组出现大量重复数据

修复后代码 #

你完全不需要用splice，直接用filter就能实现删除指定元素的需求，修改后的toggleCaptured逻辑如下：

const toggleCaptured = (checked, id) => {
    const pokemonItem = { id: pokemon.id, name: pokemon.name }
    if (checked) {
        // 勾选状态：加入已捕获数组，同时从未捕获数组中移除对应宝可梦（去重）
        setCapturedPkm([...capturedPkm, pokemonItem])
        setNotCapturedPkm(notCapturedPkm.filter(el => el.id !== id))
        setLabel('Captured!')
    } else {
        // 未勾选状态：加入未捕获数组，同时从已捕获数组过滤掉对应宝可梦
        setLabel('Not captured!')
        setNotCapturedPkm([...notCapturedPkm, pokemonItem])
        setCapturedPkm(capturedPkm.filter(el => el.id !== id))
    }
}

修改后取消勾选时会直接保留已捕获数组中id不等于当前宝可梦id的所有元素，自然就实现了删除目标宝可梦的效果，同时还解决了数组重复数据的问题。

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