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

我在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>
    )
}

const useForm=initialValues=>{
const[values，setValues]=useState（初始值）；
返回[
价值观
e=>{
设定值({
价值观
[e.target.name]：e.target.value
});
}
]
}
导出默认函数InputForm（）{
const[values，handleChange]=useForm（{query:}）
提交函数（e）{
e、 预防默认值（）
火基
.firestore（）
.收集（“时间”）
.添加({
时间：values.query
})
}
返回(
提交
)
}

阅读

函数使用次数（）{
const[times，setTimes]=useState（[]）
useffect（（）=>{
const unsubscribe=firebase
.firestore（）
.collection（'次'）
.onSnapshot（（快照）=>{
const newTimes=snapshot.docs.map（（doc）=>({
id:doc.id，
…文件数据（）
}))
设置时间（新时间）
})
return（）=>unsubscribe（）
}, [])
返回时间
}
导出默认函数TimesList（）{
常数时间=使用时间（）
返回(
{times.map（（i）=>
{i.time}
）}
)
}

我编写了一个

deleteStorage（）

函数。当然，如果您愿意的话，您可以将其放在组件中

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

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

从“./functions/deleteStorage”导入deleteStorage

在我使用它的按钮中（字体可怕的垃圾桶）就是我使用它的地方

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

deleteStorage（item.id，“collectionName”）}
/>

---

我还在想办法更新。如果我弄明白了，我会把它贴在这里

我编写了一个

deleteStorage（）

函数。当然，如果您愿意的话，您可以将其放在组件中

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

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

从“./functions/deleteStorage”导入deleteStorage

在我使用它的按钮中（字体可怕的垃圾桶）就是我使用它的地方

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

deleteStorage（item.id，“collectionName”）}
/>

我还在想办法更新。如果我弄明白了，我会把它贴在这里