如何将firebase与react功能组件同步？

Posted 2023-02-22

【中文标题】如何将firebase与react功能组件同步？

【英文标题】：How to sync firebase with react functional components?

【发布时间】：2020-08-04 11:33:50

【问题描述】：

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

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

useEffect(() => base.syncState('/', 上下文：这个， 状态：'消息' ) );

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

我想解决方案很简单，但由于我是 React 新手，所以我想不出任何线索来解决这个问题。

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

【问题讨论】：

嗨，Xav，你解决了这个问题吗？（我遇到了完全相同的问题）如果是这样，你介意分享一下吗？

【参考方案1】：

看来你可以模仿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