React Flow如何删除元素？自定义按钮仅首次删除生效后续恢复节点问题

问题根源 #

你的自定义删除逻辑存在两个核心问题，导致删除后节点会恢复：

1. 闭包陷阱：remModelData使用useCallback包裹时依赖数组为空，函数内部读取的elements永远是组件首次渲染的初始值，每次删除操作都基于初始数组修改，自然会把之前已经删除的节点带回来。
2. 无效逻辑+违反不可变数据原则：arr.indexOf(id)属于无效代码，elements是对象数组，用字符串id查找索引永远返回-1；而且直接赋值let arr = elements是引用赋值，修改arr会直接改动原状态数组，不符合React的状态更新规范。
3. 未同步删除关联边：你只过滤了目标节点，和该节点关联的连线还留在元素数组中，也会引发渲染异常。

退格键删除可以正常运行，是因为退格走的onElementsRemove逻辑使用了函数式更新，直接读取最新的元素数组操作，不存在闭包问题。

修复代码 #

直接把你原来的remModelData替换为下方代码即可：

const remModelData = useCallback((id) => {
  setElements(prevElements => {
    // 同时过滤目标节点、以及和该节点关联的所有连线
    return prevElements.filter(el => {
      if (el.id === id) return false
      if (el.source === id || el.target === id) return false
      return true
    })
  })
}, [])

函数式更新会自动拿到最新的元素数组进行操作，不需要在useCallback的依赖数组中加elements，也不会出现闭包导致的状态陈旧问题。

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