如何使用 Firebase 和 useEffect() 正确更新状态？

IT技术 javascript reactjs firebase firebase-realtime-database
2021-05-02 10:36:12

我正在尝试从 Firebase 获取数据，然后将其推送到我的状态。目标是创建一种机制，每次 Firebase 中的数据更改时都会执行此操作。

我将on()方法与useEffect(). 不幸的是，即使状态发生变化，React 也不会重新渲染我的组件。（忽略直接引用，仅供测试）

const [tasks, setTasks] = useState([]);

    useEffect(() => {
        const fetchedTasks = [];
        const ref = props.firebase.db.ref('users/1zfRCHmD4MVjJj7L884LL4TMwAH3');
        const listener = ref.on('value', snapshot => {
            snapshot.forEach(childSnapshot => {
                const key = childSnapshot.key;
                const data = childSnapshot.val();
                fetchedTasks.push({ id: key, ...data });
            });
            setTasks(fetchedTasks);
        });
        return () => ref.off('value', listener);
    }, []);

此时，当我在 Firebase 控制台中手动更改我的数据时，我可以在我的开发工具中看到它触发了侦听器，数据被获取，但它与之前的状态（任务）合并。

我当然希望它取代以前的状态。其次，组件不会重新渲染。我知道空依赖列表负责（“[]”）并且组件只安装一次，但是当我删除列表时，组件正在更新并迅速冻结我的浏览器。我也尝试过"[tasks]"，结果是相似的 - 组件一遍又一遍地重新渲染。Firebase 由上下文提供，ESLint 显示：

“React Hook useEffect 缺少依赖项：'props.firebase.db'。要么包含它，要么删除依赖项数组。”

当我这样做时，它仍然无法正常工作并且组件没有更新。

1个回答

当我的评论解决了这个问题时，这是官方的答案：

你的状态总是被合并的原因是你的变量fetchedTasks只在钩子useEffectonMount 运行时声明一次。之后，每次您的 firebase 数据库更新新值并调用 时fetchedTasks.push(...)，您都在推送相同的“旧”数组。因此，您的清单越来越长。

一种解决方案是重新声明fetchedTasks，或将其重新设置为空数组。

const [tasks, setTasks] = useState([]);

    useEffect(() => {
        const ref = props.firebase.db.ref('users/1zfRCHmD4MVjJj7L884LL4TMwAH3');
        const listener = ref.on('value', snapshot => {
            const fetchedTasks = [];
            snapshot.forEach(childSnapshot => {
                const key = childSnapshot.key;
                const data = childSnapshot.val();
                fetchedTasks.push({ id: key, ...data });
            });
            setTasks(fetchedTasks);
        });
        return () => ref.off('value', listener);
    }, [props.firebase.db]);

另一种方法是使用.map，并使用setTasks. 我认为这将是我的首选：

const [tasks, setTasks] = useState([]);

    useEffect(() => {
        const ref = props.firebase.db.ref('users/1zfRCHmD4MVjJj7L884LL4TMwAH3');
        const listener = ref.on('value', snapshot => {
            const fetchedTasks = snapshot.map(childSnapshot => {
                const key = childSnapshot.key;
                const data = childSnapshot.val();
                return { id: key, ...data };
            });
            setTasks(fetchedTasks);
        });
        return () => ref.off('value', listener);
    }, [props.firebase.db]);

请注意，您必须传递props.firebase.db给您的依赖项数组，以消除 eslint 警告。对的引用props.firebase.db永远不应该改变，所以应该保存在依赖数组中声明它。

其它你可能感兴趣的问题
上一篇挤压下的 TEVO 狼蛛 下一篇感应反冲保护？