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)
}

---

SetMaxVoces方法看起来怎么样？我应该把事情复杂化，还是这不是最佳实践？

将API调用委托给不同的模块是很常见的，但在不同的模块中设置react组件状态不是最佳实践。所以您可以为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);
}

---

将API调用委托给不同的模块是很常见的，但在不同的模块中设置react组件状态不是最佳做法。所以您可以为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);
}