Базовый пример создания, чтения, обновления, удаления с реагирующими хуками и firebase - PullRequest
Новая
       10

Базовый пример создания, чтения, обновления, удаления с реагирующими хуками и firebase

0 голосов
/ 09 октября 2019

Большая часть документации, которую я могу найти на React и Firebase, не использует хуки. Мне удалось найти отличный пример создания и чтения, который я включу ниже, но мне не удалось найти простой пример обновления и удаления с использованием перехватчиков реагирования.

Я надеюсь, что кто-то сможетпомогите мне с методами обновления и удаления, написанными аналогично коду ниже.

СОЗДАТЬ 

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>
    )
}
...