反应 Firebase 回调

Question

大约一年前，我开始使用 Firebase 学习 React，我猜一切进展顺利。然而，自从我开始写作以来，我真的很怀念像使用 Swift 一样掌握回调的艺术。

我觉得几乎没有任何关于使用 React 的回调和 Firebase 的信息直截了当。例如，有很多次我希望能够使用回调，但最终编写了许多额外的函数来执行完全相同的任务。例如，我希望能够调用一个函数，然后在 Snapshot.once 中返回一个值。但是怎么做呢？

您知道，这是我目前面临的问题的一个示例。我目前正在我的网站上绘制一个用户列表，其中包含以下信息：名字、姓氏和公司 ID。显示后，我希望能够验证 companyId 确实存在于一个名为“Companies”的单独表中，其结构如下：

公司 -> uniqueCompanyId -> 信息

我知道我不能在异步函数中返回值，但这是我正在考虑的：

isCompanyVerified(input){
  databaseCompanies.child(input).once('value', (snapshot) => {
     if(snapshot.val().isVerified){
       return true;
     } else {
       return false;
     }
  })
}

<div>
allUsers.map((singleUser) => {
  return(
    <p>{singleUser.name}</p>
    <p>{this.isCompanyVerified(singleUser.companyId)}</p>
  )
})
</div>

如果有人可以向我解释我将如何以正确的方式做到这一点，或者至少为我指明正确的方向，那对我来说真的很重要。问题是我真的不知道去哪里寻找信息。

我习惯于将所有网络/数据库功能都放在一个文件中进行结构化代码，就像我在名为 ex 的 Swift 中所做的那样。 '联网.swift'。然后执行我从特定文件中获取的函数调用。使用 React，我最终将我的所有代码都放在了每个组件中，这导致了很多重复的代码、大量的额外工作，并且看起来都是非结构化的。

我现在对语法相当熟悉，而且我确实相信我学到了很多，但是 - 我觉得我做很多事情都是错误的，还有很多东西要学。哪里是我学习真正掌握 React 的最佳地点？从中级到“经验丰富”（编写和构建 React 代码，就像它应该完成的那样）。

感谢所有帮助。我写这篇文章是因为我真的很想努力学习。

Answer 1

你不能像这样在 react 中直接写 dom。在这种情况下，dom 不会被重新渲染。将验证数据存储在一个 state 中，一旦异步数据到达，dom 就会重新渲染。

解决方案 1

这是单个UserItem 组件的实现：

UserItem.js

class UserItem extends React.Component {
  state {
    isUserVerified: false
  }

  handleVerified = snapshot => {
    this.setState({ isUserVerified: snapshot.val().isVerified })
  }

  componentDidMount {
    const {userId} = this.props;
    databaseCompanies.child(userId).once('value', this.handleVerified)
  }

  render() {
    const { isUserVerified } = this.state;

    return (
     <div>{isUserVerified ? 'verified' : 'not verified'}</div>
    )
  }
}

UserList.js

...
render(){
  allUsers.map(singleUser => <UserItem userId={singleUser.id} />
}

解决方案 2

如果您想列出所有用户，请从完整的用户对象中获取快照

componentDidMount {
  databaseCompanies.child('users').once('value', this.handleStoreUsers)
}

这将导致状态如下：

state = {
  users: {
    _key1: { id..., verified: true },
    _key2: { id..., verified: false }
   ...
  }
}

并通过它们绘制地图。