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

【问题标题】：How to sync firebase with react functional components?如何将firebase与react功能组件同步？
【发布时间】：2020-08-04 11:33:50
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

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

标签： reactjs firebase react-hooks rebase

【解决方案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

【讨论】：