如何在React函数组件中与Firebase同步数据？

Question

我正在构建一个简单的React应用程序，使用函数组件（而不是类）。因此，在将数据库与状态数据同步（在这种情况下是hooks）时，没有this可用作上下文。

我应该在函数组件中使用以下代码：

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

问题是，如你所见，在函数中this是无意义的。所以它当然不起作用。它会显示REBASE：选项参数必须包含类型为对象的上下文属性。相反，得到未定义

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

谢谢提前给我一些想法的人。

- Xav Jean

---

你好 Xav，你解决了这个问题吗？（我也遇到了完全相同的问题）如果解决了，能否分享一下呢？ - daniel blythe

Answer 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

- dikuw