使用 react 钩子和 firebase 创建、读取、更新、删除的基本示例

Question

我在 React 和 Firebase 上找到的大多数文档都没有使用钩子。我能够找到一个很好的创建和读取示例，我将在下面介绍，但我无法找到使用 react 钩子更新和删除的简单示例。

我希望有人可以帮助我更新和删除以类似于以下代码的方式编写的方法。

创造

const useForm = initialValues => {
const [values, setValues] = useState(initialValues);
return [
values,
e => {
setValues({
...values,
[e.target.name]: e.target.value
});
}
]
}
export default function InputForm() {
const [values, handleChange] = useForm({ query: "" })
function onSubmit(e) {
e.preventDefault()
firebase
.firestore()
.collection("times")
.add({
time: values.query
})
}
return (
<form onSubmit={onSubmit}>
<input name="query" value={values.query} onChange={handleChange}></input>
<button type="submit">Submit</button>
</form>
)
}

读

function useTimes() {
const [times, setTimes] = useState([])
useEffect(() => {
const unsubscribe = firebase
.firestore()
.collection('times')
.onSnapshot((snapshot) =>{
const newTimes = snapshot.docs.map((doc)=>({
id: doc.id,
...doc.data()
}))
setTimes(newTimes)
})
return ()=>unsubscribe() 
}, [])
return times
}
export default function TimesList() {
const times = useTimes()
return (
<div>
{times.map((i)=>
<li key={i.id}>{i.time}</li>)}
</div>
)
}

Answer 1

我写了一个deleteStorage()函数。当然，如果您愿意，可以将其放在组件中。

import firebase from 'firebase';
const deleteStorage = (id, collection) => {
firebase
.firestore()
.collection(collection)
.doc(id)
.delete()
}
export default deleteStorage

然后在我使用它的组件上导入了它。

import deleteStorage from "../functions/deleteStorage"

在我使用它的按钮中(字体真棒垃圾桶(是我使用它的地方。

<FaTrash
className="trash"
onClick={() => deleteStorage(item.id, "collectionName")}
/>

我仍在尝试弄清楚如何更新。如果我弄清楚了，我会在这里发布。