我試圖按 id 洗掉我的專案，但我一直收到錯誤，每個孩子在給它一個 id 后應該有一個唯一的鍵，我做錯了什么，為什么我沒有得到 id
const TodoList = () => {
const [input, setInput] = useState("");
const [todos, setTodos] = useState([])
const handleSubmit = e => {
e.preventDefault()
setTodos([...todos, input])
setInput("")
}
const handleDelete = id => {
let item = todos.filter(todo => todo.id !== id)
console.log(item)
// setTodos(item)
}
return (
<div className='todolist'>
<h2>Todo List</h2>
<form>
<input value={input} onChange={e => setInput(e.target.value)} placeholder='write something' />
<button onClick={handleSubmit}>Add todo</button>
</form>
{todos.map(todo => (
<div key={todo.id} className='todolist__details'>
<h2>{todo}</h2>
<DeleteIcon onClick={() => handleDelete(todo.id)} />
</div>
))}
</div>
);
};
export default TodoList;
uj5u.com熱心網友回復：
{todos.map((todo, i) => {
<div key={i} className='todolist__details'>
<h2>{todo}</h2>
<DeleteIcon onClick={() => handleDelete(todo.id)} />
</div>
})}
您可以在此處查看串列和鍵的反應方式
https://reactjs.org/docs/lists-and-keys.html
uj5u.com熱心網友回復：
從上面的代碼，看起來 todos 是一個字串陣列。因此，當您key通過do 進行分配時todo.id，您正在分配keyto，undefined因為該屬性在型別id中不存在。string像這樣改變你的地圖方法
{todos.map((todo, i) => (
<div key={i} className='todolist__details'>
<h2>{todo}</h2>
<DeleteIcon onClick={() => handleDelete(i)} />
</div>
))}
然后改變你的handleDelete喜歡
const handleDelete = id => {
const newTodos = [...todos];
newTodos.splice(id, 1);
console.log(newTodos)
setTodos(newTodos)
}
uj5u.com熱心網友回復：
您沒有給任何待辦事項提供 id ，傳遞該待辦事項的索引而不是 id ，它將解決您的問題 試試這個沙盒代碼鏈接
我希望你覺得這有幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/418445.html
標籤：