handleDelete函数在React Firebase应用程序中不起作用

Question

有人能帮我弄清楚为什么我的handleDelete函数不工作吗?我尝试将id从按钮传递到handlDelete函数，但它仍然不起作用。下面是handleDelete函数:

//function for deleting an item
const handleDelete = async (id) => {
const taskDocRef = doc(db, 'tasks', id)
console.log(taskDocRef);
try {
await deleteDoc(taskDocRef)
console.log('task deleted');
} catch (err) {
alert(err)
}
}

下面是返回函数:

return (
<div>
<div>
<div>
<h1>To Do List App</h1>re
<p>Double click to mark an item off, click on "X" to delete an item, and drag items to reorder.</p>
</div>
<input
type="text"
value={name}
onChange={handleChange}
/>
<button
type="submit"
onClick={handleAdd}
>
Add
</button>
</div>
<ol>
{tasks.map((task => (
<li
id={task.data.id}
key={task.data.id}
completed={task.data.completed}
onClick={handleClick}
>
{task.data.name} <button onClick={() => handleDelete(task.data.id)}>x</button>
</li>
)))}
</ol>
</div>
);
};

Answer 1

我明白了。我必须更新useEffect函数以包含id: doc.id:

//function for automatically retrieving items
useEffect(() => {
const q = query(collection(db, 'tasks'), orderBy('created'))
onSnapshot(q, (querySnapshot) => {
setTasks(querySnapshot.docs.map(doc => ({
id: doc.id,
data: doc.data()
})))
})
console.log(tasks);
}, [])

和任务。将task.data.id修改为task.id:

{tasks.map((task) => (
<li
id={task.id}
key={task.id}
completed={task.data.completed}
onClick={handleClick}
>
{task.data.name} <button onClick={() => handleDelete(task.id)}>x</button>
</li>
))}