React中删除state数组正确元素后，UI未删除对应组件的原因？

问题 #

控制台打印的待删除索引是正确的，但UI行为不匹配——总是删除数组最后一项，不过state数组中确实删除了对应索引的元素。比如点击第一项（索引0）的删除按钮，UI里移除了最后一项（索引3），但控制台显示state数组已经正确删除了索引0的元素。

相关代码如下：

EditUser.js #

// 存储每个RoleMapInput组件的数据数组
const [roleMaps, setRoleMaps] = useState([{organisation:[], roles:[], type:[]}]);

// 向UI添加一个RoleMapInput组件
const handleAddRoleMap = () =>{
    setRoleMaps((oldRoleMaps) => [...oldRoleMaps,{organisation:[], roles:[], type:[]}])
}
// 从UI删除一个RoleMapInput组件
const handleDelRoleMap = (delIndex) =>{
    console.log("delIndex: ", delIndex)
    setRoleMaps((oldRoleMaps) => {
      console.log(oldRoleMaps)
      return oldRoleMaps.filter((_,index)=>index !== delIndex)
})

...

return(

...

// 根据roleMaps数组渲染多个RoleMapInput组件
{console.log("roleMaps at grid: ",roleMaps)}
{roleMaps.map((roleMap, index) => (
       <RoleMapInput key={index} roleMapIndex={index} roleMap={roleMap} handleDelRoleMap={handleDelRoleMap}/>
))}

...

)

RoleMapInput.js #

export default function RoleMapInput(props) {

...

return (
    <>
      <Grid item xs={1}>
        <FormControl fullWidth>
          <IconButton aria-label="delete" color='error' onClick={()=>props.handleDelRoleMap(props.roleMapIndex)}>
            {props.roleMapIndex}
            <DeleteOutlineOutlinedIcon/>
          </IconButton>
        </FormControl>
      </Grid>
    </>
  );
}

解决方案 #

问题核心是用数组索引作为React组件的key。删除元素后，后续元素的索引会自动前移，但React会基于key复用旧组件实例，导致UI更新混乱——看起来删了最后一项，实际是组件复用后显示内容错位。

解决步骤：

• 给每个roleMap对象添加唯一标识，比如时间戳或uuid：

// 初始化state时加上id
const [roleMaps, setRoleMaps] = useState([{
    id: Date.now(),
    organisation:[], 
    roles:[], 
    type:[]
}]);

// 修改添加函数，给新对象加唯一id
const handleAddRoleMap = () =>{
    setRoleMaps((oldRoleMaps) => [...oldRoleMaps,{
        id: Date.now(),
        organisation:[], 
        roles:[], 
        type:[]
    }])
}

• 渲染时用唯一id作为key，传递id而非索引给删除函数：

{roleMaps.map((roleMap) => (
       <RoleMapInput 
           key={roleMap.id} 
           roleMapId={roleMap.id} 
           roleMap={roleMap} 
           handleDelRoleMap={handleDelRoleMap}
       />
))}

• 修改删除函数，通过id筛选元素：

const handleDelRoleMap = (delId) =>{
    console.log("delId: ", delId)
    setRoleMaps((oldRoleMaps) => {
      return oldRoleMaps.filter(item => item.id !== delId)
})
}

• 更新RoleMapInput的点击逻辑：

<IconButton aria-label="delete" color='error' onClick={()=>props.handleDelRoleMap(props.roleMapId)}>
    {/* 这里可以根据需求显示索引或其他内容 */}
    <DeleteOutlineOutlinedIcon/>
</IconButton>

这样React就能精准识别每个组件实例，删除操作后UI会和state保持一致。

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