ReactJS数组元素删除异常：删除中间元素时误删其余非首元素

这个问题主要是闭包陷阱加上组件依赖管理不当导致的，具体来说：

1. 未使用useCallback包裹onDelete函数：在App.js中，onDelete没有用useCallback包裹，每次App组件因为items更新而重新渲染时，都会生成一个新的onDelete函数实例。而旧的onDelete函数会捕获渲染时的items快照，当你点击早期创建的Item的删除按钮时，它会用旧的items数组来过滤，导致错误的删除结果。

比如你依次添加A、B、C、D：

• 添加B后，onDelete捕获的items是[A,B]
• 后续添加C、D后，新的onDelete捕获的是[A,B,C,D]，但B对应的Item组件仍然持有旧的onDelete函数
• 当你点击B的删除按钮时，旧的onDelete会用[A,B]过滤掉B，得到[A]，然后调用setItems([A])，自然C和D就都消失了。

2. Item组件的useMemo依赖缺失：在Item.js中，生成删除按钮的useMemo没有把props.onDelete和props.item加入依赖数组，导致onDelete函数更新时，删除按钮仍然使用旧的函数实例，无法获取最新的items数组。

3. 删除时使用了可能过期的taskDetail：删除按钮调用props.onDelete(taskDetail)，但taskDetail是Item内部的state，当父组件的props.item更新时（比如其他Item被编辑），taskDetail不会自动同步，可能导致删除的不是当前父组件中实际存在的item值。

我们分三步修复这些问题：

1. 给onDelete添加useCallback包裹 #

在App.js中，把onDelete用useCallback包裹，确保函数引用稳定，且依赖items：

const onDelete = useCallback((odlv)=>{
 console.log("old",odlv)
 let newItems=items.filter((item)=>{
 return (item!==odlv)
 });
 setItems(newItems)
}, [items]);

这样每次items变化时，onDelete会更新为新的函数，确保它能获取到最新的items数组。

2. 让taskDetail同步父组件的props.item #

在Item.js中，添加useEffect监听props.item的变化，当父组件的item更新时，同步更新taskDetail：

import InputBox from "./InputBox"
import { useMemo, useState, useCallback, useEffect } from "react" // 导入useEffect

export default function Item(props){
 let [edit,setEdit]=useState(false)
 let [taskDetail,setTaskDetail]=useState(props.item)
 let [error,setError]=useState('')

 // 添加这个effect，同步父组件的item变化
 useEffect(() => {
  setTaskDetail(props.item);
 }, [props.item])

 // ... 其他代码保持不变
}

这能确保taskDetail始终和父组件传递的item值一致，避免编辑或删除时使用过期的值。

3. 修正useMemo的依赖数组，并改用props.item进行删除 #

在Item.js中，修改useMemo的依赖数组，加入props.onDelete和props.item，并且删除时使用props.item而不是taskDetail：

let [titleDisplay,editButton,deleteButton]=useMemo(()=>{
 if(edit){
 return [<InputBox value={taskDetail} error={error} onChange={handleTaskUpdate} />,<button onClick={handleSave} className='btn btn-success '>Save</button>,<button onClick={()=>{setEdit(false)}} className='ms-1 btn btn-danger'>Cancel</button>]
 }
 return [
  <h5>{props.item}</h5>,
  <button onClick={()=>setEdit(true)} className='btn btn-secondary '>Edit</button>,
  <button className='ms-1 btn btn-danger' onClick={()=>{props.onDelete(props.item)}}>Delete</button> // 这里改用props.item
 ];
 },[edit,taskDetail,error,props.onDelete,props.item]) // 添加props.onDelete和props.item到依赖

这样useMemo会在onDelete或props.item变化时重新生成按钮，确保使用的是最新的删除函数和item值。

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