Question

大约一年前，我开始使用Firebase学习React，而且一切进展顺利，我想。但是，自从我开始写书以来，我真的很想念像Swift一样掌握回调的技巧。

我觉得几乎没有任何信息可以直接使用React回调和Firebase。例如，曾经有很多次我希望能够使用回调，但是最终编写了许多额外的功能来执行完全相同的任务。例如，我希望能够调用一个函数，然后在Snapshot.once内部返回一个值。但是如何？

您看到的，这是我此刻面临的一个问题示例。我目前正在映射我网站上的用户列表，其中包含以下信息：名字，姓氏和companyId。在显示时，我希望能够验证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>

如果有人可以向我解释我将如何以正确的方式做到这一点，或者至少将我指出正确的方向，那对我来说真的意味着世界。问题是，老实说，我不知道在哪里寻找信息。

我习惯将代码结构化，将所有网络/数据库功能都放在一个文件中，就像我在Swift中称为ex一样。 “ Networking.swift”。然后执行从特定文件中获取的函数调用。使用React，我最终将我的所有代码都包含在每个Component中，从而导致了很多重复的代码，大量的额外工作并使它们看起来都是非结构化的。

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

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

Answer 1

您不能像这样直接在反应中编写dom。在这种情况下，不会重新渲染dom。将验证数据存储在一个状态中，并且异步数据到达后将立即重新渲染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 }
   ...
  }
}

然后将它们穿过地图。

反应Firebase回调

1 个答案:

解决方案1

解决方案2

反应Firebase回调

1 个答案:

解决方案1 ​​

解决方案2

解决方案1