React过滤数组时如何将元素id自动调整为连续数值

解决方案 #

你只需在过滤删除目标待办后，对剩余数组做一次id重赋值即可，利用数组天然的连续索引作为生成id的基准，修改代码如下：

1. 首先修改子组件内的删除处理函数（注意不要和props传入的setTodoList重名，避免命名冲突）：

const handleDeleteTodo = (todoId) => {
  if (props.allTodos.length === 1) {
    props.setTodoList([{ id: 0, name: 'No active Todos' }])
    return
  }
  // 过滤掉要删除的待办项
  const filteredTodos = props.allTodos.filter(todo => todo.id !== todoId)
  // 遍历剩余项，用索引+1生成连续的新id
  const updatedTodos = filteredTodos.map((todo, index) => ({
    ...todo,
    id: index + 1
  }))
  props.setTodoList(updatedTodos)
}

2. 修正渲染逻辑的小问题：你当前遍历输出待办名称时误用了整个数组取值，应该取当前遍历项的属性，同时补充React列表渲染必填的key属性、修改点击事件绑定的函数：

return (
  <div id="todos_container">
    {
      props.allTodos.map((prev) => {
        return (
           <div id="item_container" key={prev.id}>
             <button type='button' className='check_button' onClick={() => handleDeleteTodo(prev.id)} />
             <div>{prev.name}</div>
           </div>
        )
      })
    }
  </div>
)

额外补充：如果后续要做新增待办的功能，新增时id直接取当前todoList的长度+1即可，就能全程保持id连续。

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