根据属性值删除数组对象时findIndex返回-1、总删除最后一项问题

核心问题由两点共同导致：

• 类型不匹配：e.target.id从DOM元素获取到的id是字符串类型，而你数组内存储的对象id是数字类型，使用===严格相等判断时会同时校验值和类型，匹配失败后findIndex返回-1
• splice方法特性：当splice接收的第一个索引参数为负数时，会从数组末尾倒序计算位置，-1就对应数组最后一项，因此出现总是删除最后一条的现象

可任选以下一种方式解决匹配问题：

1. 将DOM获取的id转换为数字后再做严格匹配（最稳妥）

const targetId = Number(e.target.id)
const foundIndex = list.findIndex(i => i.id === targetId)

2. 使用宽松相等运算符==，JS会自动做隐式类型转换

const foundIndex = list.findIndex(i => i.id == e.target.id)

3. 统一数据格式：将数组内对象的id全部存储为字符串类型，和DOM属性类型保持一致

额外提示：你当前直接对this.state.playlist引用的数组执行splice属于直接修改React state，不符合不可变数据规范，可能导致视图不更新。更推荐用filter生成新数组后调用setState更新：

const newPlaylist = this.state.playlist.filter(i => i.id !== Number(e.target.id))
this.setState({ playlist: newPlaylist })

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