嗨，我如何让 firebase 实时更新我的​​数据？

Question

我当前的设置是在页面加载时提取 firebase 数据，这很棒，但现在我需要我的应用程序上的数据实时更新我该怎么做？

useEffect(() => {

    const user = Authentication.auth().currentUser;
    {
        user !== null &&
            Authentication.firestore().collection('Health_data')
                .doc(user.uid)
                .get()
                .then(doc => {
                    healthDataSet(doc.data())
                    setLoading(false)
                }).catch(function (error) {
                    console.error("Error reading health", error);
                });
    }
    return () => {
        document.body.style.overflow = 'unset';
    }

}, []);

//calculates calorie requirments
useEffect(() => {
    if (!loading && healthData !== null) {


        if (healthData.units === 'Kg') {
            BMIset(Math.round((healthData.weight / ((healthData.height / 100) * (healthData.height / 100))) * 10) / 10)


                if (healthData.gender === 'female') {
                    BMRset(Math.round(((655.1 + (9.563 * healthData.weight) + (1.850 * healthData.height) - (4.676 * healthData.age)) * 1.37) * 0.8))
                } else {
                    BMRset(Math.round(((88.2 + (13.362 * healthData.weight) + (4.799 * healthData.height) - (5.677 * healthData.age)) * 1.37) * 0.8))
                }

            }

            if (healthData.goal === 'Gain') {

                if (healthData.gender === 'female') {
                    BMRset(Math.round(((655.1 + (9.563 * healthData.weight) + (1.850 * healthData.height) - (4.676 * healthData.age)) * 1.37) * 1.2))
                } else {
                    BMRset(Math.round(((88.2 + (13.362 * healthData.weight) + (4.799 * healthData.height) - (5.677 * healthData.age)) * 1.37) * 1.2))
                }

            }

            if (healthData.goal === 'Recomp') {
                if (healthData.gender === 'female') {
                    BMRset(Math.round((655.1 + (9.563 * healthData.weight) + (1.850 * healthData.height) - (4.676 * healthData.age)) * 1.37))
                } else {
                    BMRset(Math.round((88.2 + (13.362 * healthData.weight) + (4.799 * healthData.height) - (5.677 * healthData.age)) * 1.37))
                }

所以这是我在提取数据后的代码，数据用于计算我想要它，所以当数据像这样更新时。

  const updateWeight = () => {
        if (Weight !== null) {
            database.collection('Health_data').doc(localStorage.getItem('user')).update({
                weight: Weight
            }).catch((error) => {
                alert(error.message)
                console.log('failed to write', error);
            });
        } else {
            alert('A weight must be in put')
        }
    }

计算得到新信息，页面实时更新可以吗？

Answer 1

您可以使用 onSnapshot() 方法收听文档。一个初始 使用您提供的回调调用创建文档快照 立即使用单个文档的当前内容。然后， 每次内容更改时，另一个调用会更新文档 快照。

欲了解更多详情，请访问：
https://firebase.google.com/docs/firestore/query-data/listen#web_1