我如何删除一个列表项目，已被赋予一个唯一的id创建时，在React + Firebase?

Question

我正在使用React和Firebase创建一个Todo列表。到目前为止，我已经创建了AddToDo功能，但是，现在我在删除功能方面遇到了麻烦。我想这就是我的问题所在。例如，当我尝试单击我设置的删除图标时，我得到一个错误:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'id')

如果有帮助的话，下面是代码。AddLink.js

import { useState, useEffect } from "react";
import classes from "./addlink.module.css";
import firebase from "firebase/app";
import initFirebase from "../../config";
import "firebase/firestore";
import Todo from "../Todo/Todo";
import { v4 as uuidv4 } from "uuid";
initFirebase();
const db = firebase.firestore();
function AddLink(props) {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState("");
useEffect(() => {
db.collection("links")
.orderBy("timestamp", "desc")
.onSnapshot((snapshot) => {
// this gives back an array
setTodos(
snapshot.docs.map((doc) => ({
id: doc.id,
todo: doc.data().todo,
}))
);
});
}, []);
const addTodo = (event) => {
event.preventDefault();
console.log("clicked");
db.collection("links").add({
id: uuidv4(),
todo: input,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
setInput("");
};
return (
<div className={classes.addlink}>
<form>
<div className={classes.adminlink}>
<input
type="text"
value={input}
onChange={(event) => setInput(event.target.value)}
/>
<button
className={classes.adminbutton}
type="submit"
onClick={addTodo}
>
Add new link
</button>
</div>
</form>
{todos.map((todo, id) => (
<Todo value={todo} key={id} />
))}
{/* {modalIsOpen && (
<Modal onCancel={closeModalHandler} onConfirm={closeModalHandler} />
)}
{modalIsOpen && <Backdrop onCancel={closeModalHandler} />} */}
</div>
);
}
export default AddLink;

和Todo.js

import React from "react";
import { AiOutlinePicture } from "react-icons/ai";
import { AiOutlineStar } from "react-icons/ai";
import { GoGraph } from "react-icons/go";
import DeleteForeverIcon from "@material-ui/icons/DeleteForever";
import classes from "./todo.module.css";
import firebase from "firebase/app";
import initFirebase from "../../config";
import "firebase/firestore";
initFirebase();
const db = firebase.firestore();
function Todo(props) {
const deleteHandler = () => {
db.collection("todos").doc(props.todo.id).delete();
};
return (
<li className={classes.adminsection}>
<div className={classes.linkCards}>
<h3>{props.text}</h3>
<p>This is a new link</p>
<div>
<AiOutlinePicture />
<AiOutlineStar />
<GoGraph />
<DeleteForeverIcon onClick={deleteHandler} />
</div>
</div>
</li>
);
}
export default Todo;

任何帮助都将是非常感激的。

Answer 1

const deleteHandler = () => {
db.collection("todos").doc(props.todo.id).delete();
};

你应该用props.value.id代替props.todo.id。

const deleteHandler = () => {
db.collection("todos").doc(props.value.id).delete();
};

或者您可以更改:

<Todo value={todo} key={id} />

<Todo todo={todo} key={id} />

用来访问props.value的键应该与jsx模板中声明的键相同。使用原型可以帮助你避免这些错误。

Answer 2

从数据库中删除后，您应该使用

更新状态UI

Todos.filter(d=>d.id !== id of deleted list item)