时间戳

首页 > 解决方案 > 如何将firebase与反应功能组件同步？

reactjs - 如何将firebase与反应功能组件同步？

问题描述

我正在使用功能组件（而不是类）构建一个简单的 React 应用程序。因此，在将数据库与状态数据（在本例中为钩子）同步时，没有this可用作上下文。

我应该在函数组件中使用的代码如下

useEffect(() => { base.syncState('/', { context: this, state: 'messages' }) });

如您所见，问题在于，这在函数中没有任何意义。所以当然行不通。它显示REBASE: options 参数必须包含对象类型的上下文属性。相反，未定义

我想解决方案很简单，但由于我是 React 的新手，我无法找到解决此问题的任何线索。

提前感谢任何可以给我一些想法的人。

标签： reactjsfirebasereact-hooksrebase

解决方案

看起来你可以模仿this如下：

useEffect(() => {
  const ref = base.syncState(endpoint, {
    context: {
      setState: (stateChange) => setState({ ...stateChange[stateName] }),
      state,
    },
    state: stateName
  })

  return () => {
    base.removeBinding(ref);
  }
}, [stateName])

但是可能有一种更现代的方式来做到这一点：

useEffect(() => {
  let ref = firebase.db.ref(endpoint);
  ref.on('value', snapshot => {
    if (snapshot.val()) setState(snapshot.val());
  });
}, [stateName]);

详细信息在这里：https ://github.com/tylermcginnis/re-base/issues/264

推荐阅读