【问题标题】：I want to give an id to every todo element that renders我想给每个渲染的 todo 元素一个 id
【发布时间】：2020-10-06 23:08:06
【问题描述】：

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

在这个函数中，我想给每个 todo 元素一个新的唯一的 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>

【问题讨论】：

create unique id with javascript 的副本另请参阅google.com/…
如果您没有将待办事项保存在 localstorage 中，您可以使用以下命令：const createId = ((id) => () => id++)(1);const id = createId()
为什么要添加 ID？你会用它们做什么？

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

创建一个局部变量 id，每次你需要一个新的 id 时，只需增加 id.. 否则我会推荐 assign Date.now() 作为 id 因为它永远不会有重复的值

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

【讨论】：

【解决方案3】：

你可以时间戳

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

永远独一无二
很难猜到
始终按顺序进行

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

【讨论】：