React中useState结合array.map删除元素显示异常问题排查

你的问题出在状态更新的闭包陷阱以及缺少React元素的key属性这两个点上：

1. 闭包导致删除时拿到旧状态 #

不管是添加还是删除元素的逻辑，你直接使用了当前作用域下的unitLeaders变量，但React的状态更新是异步的，当这些函数执行时，它们捕获的unitLeaders可能不是最新的状态值，导致删除操作无法正确过滤数组。

2. 缺少key属性引发渲染异常 #

你用map生成<Tag>元素时没有指定key属性，React无法准确追踪每个元素的身份，删除操作后可能出现DOM渲染和状态不匹配的情况。

修正后的代码： #

状态更新部分（添加+删除）

// 添加元素：改用函数式更新获取最新状态
const onClick = ({key}) => {
    setUnitLeaders(prevState => [...prevState, key])
};

// 删除元素：同样用函数式更新
const clearLeader = (leader) => {
    setUnitLeaders(prevState => prevState.filter(item => item !== leader))
};

渲染Tag部分（添加key）

let tags = unitLeaders.map(leader => {
    return <Tag 
                key={leader} // 必须添加唯一key
                closable={true}
                closeIcon={<CloseCircleOutlined/>}
                onClose={() => clearLeader(leader)}
            >
                {leader}
            </Tag>;
})

这样修改后，就能保证每次状态更新都基于最新的数组值，同时React能正确识别每个Tag元素，删除操作就能正常工作了。

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