Question

我已经知道我们应该做这样的事情以使状态随着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方法的外观如何？我应该把这样的事情复杂化，还是最好的做法？

Answer 1

通常将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);
}

ReactJS-将setState与Firebase一起使用

1 个答案: