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"

在（Font Awesome Trashcan）中使用它的按钮是我使用的地方。

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

我仍在尝试找出更新方式。如果我知道了，我会在这里发布。

使用React Hook和Firebase创建，读取，更新，删除的基本示例

1 个答案: