删除文档Firebase v9 React v18, indexOf问题

Question

//Delete document
const deleteAnime = (e) => {
e.preventDefault()
deleteDoc(doc(db,"Users", uid,"anime",anime.id))

}

这是删除文档的代码，其中动漫。Id为文档Id

{anime.map(function(d, idx){
return (<form onSubmit={deleteAnime} className={styles.card}>
<h2 key={idx}>{idx+1}. {d.title}</h2>
<p key={idx}>Genre: {d.genre}</p>
<p key={idx}>Number of episodes: {d.numb}</p>
<p key={idx}>Comment: {d.comment}</p>
<p key={idx}>Rating: {d.rating}/10</p>
<button key={idx} onClick={(e) => {deleteAnime(e, index)}}>Remove</button>
</form>)})}

这是我在div和form中尝试的返回代码，和收到以下错误:

无法读取未定义的属性(读取'indexOf')

Answer 1

错误是你试图从动漫访问id，但它是一个数组，而不是一个对象，所以我建议获得点击项目的索引，如果你不提交任何详细信息，就不需要使用表单。

也不需要在每个元素中定义key，因为只需要在map函数的根元素

中定义key

const deleteAnime = (item) => {
e.preventDefault()
deleteDoc(doc(db, "Users", uid, "anime", item.id));
}
{
anime.map((d, idx) => {
return (
<div key={idx} className={styles.card}>
<h2>{idx+1}. {d.title}</h2>
<p>Genre: {d.genre}</p>
<p>Number of episodes: {d.numb}</p>
<p>Comment: {d.comment}</p>
<p>Rating: {d.rating}/10</p>
<button key={idx} onClick={() => deleteAnime(d)}>Remove</button>
</div>
)
})
}