时间戳

首页 > 解决方案 > ReactJS - 使用 setState 和 firebase 监听

javascript - ReactJS - 使用 setState 和 firebase 监听

问题描述

好吧，我已经知道我们应该做这样的事情来使状态与 firebase 更改保持同步。

import FirebaseRef from '...'
   .
.
.
class MyComponent extends React.Component {
 state = {
      maxVotes: 0  
    }

componentDidMount() {
   const { boardId } = this.props
   FirebaseRef.child(`boards/${boardId}/maxVotes`).on('value', snapshot => {
      this.setState({maxVotes: snapshot.val()})
   })
}

但我的编码习惯是在其他文件中委托 API 调用并将其导入组件。我可以做这样的事情吗？

import { setMaxVotes } from ...
.
.
.
 componentDidMount() {
   const { boardId } = this.props
   setMaxVotes(boardId)
}

setMaxVotes 方法看起来如何？我应该使这样的事情复杂化，还是不是最佳实践？

标签： javascriptreactjsfirebasefirebase-realtime-database

解决方案

将 API 调用委托给不同的模块是很常见的，但在不同的模块中设置反应组件状态并不是最佳实践。因此，您可以为 API 调用创建不同的模块，但您应该在组件本身中设置状态。代码可能看起来像这样

componentDidMount() {
   const { boardId } = this.props
   setMaxVotes(boardId, 'value', snapshot => {
      this.setState({maxVotes: snapshot.val()})
   })
}

setMaxVotes(boardId, eventType, cb) {
   FirebaseRef.child(`boards/${boardId}/maxVotes`).on(eventType, cb);
}

推荐阅读