我想给渲染的每个待办事项元素一个 id

Question

function handleChange(event) {
event.preventDefault()
setNewItem(event.target.value)
}

在这个函数中，我想给每个待办事项元素一个新的、唯一的 id。

function addTodo(event) {
event.preventDefault()
setNewItem({ id: 0 })
setTodosList(prevList => [...prevList, newItem])
setNewItem("");
inputRef.current.focus()
if (newItem === "") {
alert("Plese Write an todo");
}
}
function removeTodo() {
// setTodosList(prevItems => prevItems.filter(item => item.id !== id))
}
const allTodos = todosList.map(item => (
<li key={item}>
{item}
<i className="ri-delete-bin-line del" onClick={removeTodo}></i>
</li>
));

在这里，我的所有代码都在运行。

<header>
<img src={require('./images/todo.png')} alt="Todo-Logo" width="100" height="100" />
<h1 className="title">My Todo App</h1>
</header>
<div className="container">
<br />
<form>
<div className="input-btnFlex">
<input
type="text"
placeholder="Write Your Todo "
name="newItem"
ref={inputRef}
value={newItem}
onChange={handleChange}
/>
<button className="ri-add-circle-fill add-btn" onClick={addTodo}></button>
</div>
</form>
<div>
<ul>
{allTodos}
</ul>
</div>
</div>

Answer 1

创建一个局部变量 id，每次需要新 id 时，只需递增 id。 否则，我建议将Date.now((分配为id，因为它永远不会有重复的值

其他方法[不推荐] 仅在绝对必要时使用此方法： 如果您使用的是列表，请使用列表的索引作为 ID。

Answer 2

以下是一些可用于 id 的选项：

• 日期/时间戳。
• 任何用于JavaScript的唯一id生成器，如UUID
• 使用 Math.random(( 创建自己的随机 id 生成器函数
• 您可以使用索引创建自己的自定义 id 字符串

Answer 3

你可以时间戳

如果一个真正的人类用户一个接一个地创建待办事项，你可以使用时间戳作为标识符，因为它每次总是不同的，并且无论顺序如何都会保持不变。

• 始终独一无二
• 难以猜测
• 始终按顺序排列

setNewItem({ id: Date.now().toString() })