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

Question

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

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

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

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

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

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

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