使用array.splice()时React组件未重新渲染的问题排查

你的DeleteNote方法无法触发组件重渲染，核心原因大概率是数组更新操作未被React检测到，或是删除逻辑存在隐性错误，以下是具体排查方向和解决方案：

1. 修复ID匹配的隐性问题 #

你在findIndex中使用e.id == id进行判断，==的类型转换特性可能导致ID匹配失败（比如state中note的id是数字，但传入的id是字符串），此时findIndex会返回-1，splice(-1, 1)要么删除数组最后一个元素（非目标元素），要么无任何操作。最终notes数组和原state内容一致，React浅比较后会跳过重渲染。

解决：改用**严格相等===**判断ID，避免类型转换带来的意外：

const selectedNoteIndex = allNotes.findIndex(e => e.id === id)

2. 采用Immutable的数组更新方式（推荐） #

splice是直接修改数组的可变操作，即便你复制了原数组，这种方式也不如filter可靠。filter会返回全新数组，确保React能明确检测到state变化，触发重渲染。修改后的DeleteNote方法如下：

DeleteNote = (id) => {
  this.setState(prevState => ({
    notes: prevState.notes.filter(note => note.id !== id)
  }))
}

这种写法无需手动查找索引，逻辑更简洁，完全符合React的immutable状态更新原则。

3. 验证子组件的参数传递 #

检查MainContainer组件是否正确接收deleteMethod并传递目标note的ID。比如子组件中调用删除方法时，必须确保传入正确的ID：

// 子组件内示例（确保传参正确）
<button onClick={() => deleteMethod(note.id)}>删除</button>

如果未传入ID，DeleteNote中的id为undefined，findIndex找不到匹配元素，数组无变化，自然不会触发重渲染。

内容的提问来源于stack exchange，提问作者T R A C E ツ