Question

所以我有一个称为Agents的组件，从本质上来说，它是带有包含有关Agent数据的行的表。

我想从Firestore获取有关代理的完整数据，并使用Firestore中另一个集合的数据填充它，然后将其呈现到屏幕上。

这是一段有效的代码，但是我有一些疑问：

为什么现在延迟渲染？（首先，我有旋转器要加载-没关系，我希望如此，但是旋转器隐藏了，我在表中看到1个代理持续0.5s，然后我看到了所有数据。我想在旋转器走后看到所有数据。我的代码有问题吗？
如何填充数据。也许有另一种方法可以做到这一点，或者有另一种好的做法，因为我认为我的“ componentDidMount”太可怕了，我猜我使用的解决方案并不常见。

因此，对于2个问题，我将描述我想要的东西：

在用户集合中，我有文档，它们是对象，具有称为-个人资料的属性。该属性包含集合中名为 roles 的文档ID！我想通过该文档ID获取该数据。这就是为什么我的componendDidMount异步的原因，因为我想等到我通过角色ID从角色集合中获取数据。

请帮助我优化我的代码

class Agents extends Component {
  state = {
    isLoading: true,
    agents: [],
    showOptionsFor: null
  }

  async componentDidMount() {
    firebase
      .firestore()
      .collection('users')
      .orderBy('lastName')
      .onSnapshot(async snapshot => {
        let changes = snapshot.docChanges()

        let agents = this.state.agents
        for (const change of changes) {
          const agent = {
              id: change.doc.id,
              ...change.doc.data()
            }

          if (change.type === 'added' || change.type === 'modified') {
            await firebase
              .firestore()
              .collection('roles')
              .doc(change.doc.data().profile).get().then( response => {
                agent['role'] = response.data().profile
                agents.push(agent)
                }
              )
          }

          if (change.type === 'modified') {
            const newAgentsArray = agents.filter(element => {
              return element.id !== change.doc.id
            })
            agents = newAgentsArray

            agents.push(agent)
          }
      }

      this.setState({
        agents: agents,
        isLoading: false
      })
    })
  }

如何正确地从Firebase集合中获取并填充数据？

0 个答案: