Reactjs Firebase/React：如果电子邮件尚不存在，则添加用户电子邮件记录

这个问题已经被问了好几次，也被回答了好几次，但在我看来，firebase已经改变了，而且大多数提供的答案都不再有效，所以我再次使用这个简单的场景：我有一个表单，用户可以在其中输入他的电子邮件。然后，我将创建一个新的firebase记录，例如：

-Ku_1ojtDA-3hVO6aN38
   email: "hello@world.com"

我主要关心的是避免在firebase中重复相同的电子邮件，因此我尝试“获取”该库，并在发布之前检查其中是否存在具有相同价值的现有记录。到目前为止，以下是我为该联系人表单制作的组件：

import React, { Component } from 'react';
import * as firebase from 'firebase';

const config = {
  apiKey: "**************************************",
  authDomain: "***********.firebaseapp.com",
  databaseURL: "https://***********.firebaseio.com",
  projectId: "***********",
  storageBucket: "",
  messagingSenderId: "***********",
};


const database = firebase
  .initializeApp(config)
  .database()

const addLocation = data => database.ref().child('users').push(data, response => response);

const updateLocation = (id, data) => database.ref().child(`users/${id}`).update(data, response => response);

const actions = {
  addLocation,
  updateLocation,
};


class Contact extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    var email = this.state.value;
    // database.ref("users").orderByChild('email').equalTo(email).once("value", snapshot => {    
    database.ref().child("users").orderByChild('email').equalTo(email).once("value", snapshot => {
      const userEmail = snapshot.val();
      if (userEmail){
        console.log("user exists!");
      } else {
        addLocation({email: email});
      }
    });
    dataLayer.push({'event': 'emailAcquisition'});
  }


  render() {
    return (

            <form onSubmit={this.handleSubmit}>
              <div className="centerpanel is-mobile">
                <div className="leftpanel" id="email-field">
                  <p className="control has-icons-left">
                    <input className="input is-large" type="email" id="email-field" placeholder="Email" value={this.state.value} onChange={this.handleChange}  />
                    <span className="icon is-normal is-left">
                      <i className="fa fa-envelope"></i>
                    </span>
                  </p>
                </div>
                <div className="rightpanel" id="email-button">
                  <p className="control">
                    <input className="button is-primary is-large" type="submit" value="Submit" />
                  </p>
                </div>
              </div>
            </form>

    );
  }
}

export default Contact;

---

对于noob的问题，很抱歉，任何意见都将不胜感激

检查任何引用中是否存在电子邮件、用户名或任何值的最佳官方方法是使用额外的节点存储和复制电子邮件，例如：

+emails:
-------hello@world.com : true,
-------another@email.com: true

通过向

电子邮件

节点添加一次侦听器，您可以轻松检查从文本框或任何内容获取的

电子邮件

变量的值是否存在，如果电子邮件节点上不存在该电子邮件，则您将获得具有

null

值的快照，以下js示例在我的应用程序上测试和使用：

firebase.database().ref('emails/'+ email).once('value', function (dataSnapshot) {
if(dataSnapshot.val() !== null) { 
        console.log(dataSnapshot.val());
        //the email already exists
   }
else{
       //the  email is available
}

将电子邮件添加到重复节点，如下所示：

firebase.database().ref('emails/' + email).set(true);

请注意，

email

变量是您的变量，其中包含您要检查是否可用的电子邮件

---

非规范化在firebase中是正常的，您必须以在UI中使用数据的方式来构造数据。更多信息是。

检查任何引用中是否存在电子邮件、用户名或任何值的最佳和正式方法是使用其他节点存储和复制电子邮件，例如：

+emails:
-------hello@world.com : true,
-------another@email.com: true

通过向

电子邮件

节点添加一次侦听器，您可以轻松检查从文本框或任何内容获取的

电子邮件

变量的值是否存在，如果电子邮件节点上不存在该电子邮件，则您将获得具有

null

值的快照，以下js示例在我的应用程序上测试和使用：

firebase.database().ref('emails/'+ email).once('value', function (dataSnapshot) {
if(dataSnapshot.val() !== null) { 
        console.log(dataSnapshot.val());
        //the email already exists
   }
else{
       //the  email is available
}

将电子邮件添加到重复节点，如下所示：

firebase.database().ref('emails/' + email).set(true);

请注意，

email

变量是您的变量，其中包含您要检查是否可用的电子邮件

---

非规范化在firebase中是正常的，您必须以在UI中使用数据的方式来构造数据。更多信息如下。

这是工作代码，问题是我试图读取基本代码的方式：

 handleSubmit(event) {
    var userEmail = this.state.value;
    event.preventDefault();
    firebase.database().ref('/users').orderByChild("email").equalTo(userEmail).once('value').then(function(snapshot) {
      if (snapshot.val() !== null) {
        console.log("emails exists")
        // handle error
      } else {
        console.log("emails do not exists")
        // push record to Firebase
      }
    });
  }

---

这是工作代码，问题是我试图读取基的方式：

 handleSubmit(event) {
    var userEmail = this.state.value;
    event.preventDefault();
    firebase.database().ref('/users').orderByChild("email").equalTo(userEmail).once('value').then(function(snapshot) {
      if (snapshot.val() !== null) {
        console.log("emails exists")
        // handle error
      } else {
        console.log("emails do not exists")
        // push record to Firebase
      }
    });
  }

---

---

我认为应该是

firebase.database（）.ref（“用户”）.orderByChild（“电子邮件”）

，但我不确定还有第二件事。您不需要

$（'input#email field'）.val（）

值为

此.state.value

。尽量不要混淆jQuery并做出反应。感谢您的快速回答，我尝试用您的示例替换该行，但似乎代码仍然没有被解释（console.log就在=>之后，事件甚至没有被触发）。感谢您的帮助。state.value tho:）控制台上有错误吗？很遗憾没有。尽可能地安静。我会继续调查并试图找到更多关于这方面的信息。一旦（'value'，snapshot=>）出现在文档中……我认为应该是

firebase.database（）.ref（“用户”）.orderByChild（'email'）

，但我不确定还有第二件事。您不需要

$（'input#email field'）.val（）

值为

此.state.value

。尽量不要混淆jQuery并做出反应。感谢您的快速回答，我尝试用您的示例替换该行，但似乎代码仍然没有被解释（console.log就在=>之后，事件甚至没有被触发）。感谢您的帮助。state.value tho:）控制台上有错误吗？很遗憾没有。尽可能地安静。我会继续调查并尝试找到更多关于这个的信息。一旦（'value'，snapshot=>）出现在文档中，请尽可能保持数据结构的平面化。这很有趣，我真的没有考虑过这个选项，因为我已经习惯了SQL。我真的很感激你的回答，并将在标记为已回答之前测试代码。顺便问一下，您是否知道如何构建节点来存储电子邮件“表”，如您在firebase的第一部分中解释的记录列表？您必须花一些时间来学习如何构建数据，就像您花一些时间为SQL表做ERDs一样。我已经更新了代码，介绍了如何向侦听器的引用添加另一个节点和无效修复

ref（'emails/'）+email）

。您还应该注意，这种方法只下载电子邮件而不是下载用户的全部信息要快得多，效率也高得多。非常感谢您的回答。尽可能保持您的数据结构平坦。这很有趣，我真的不知道这个选项，因为我太习惯SQL了。我真的很感激你的回答，并将在标记为已回答之前测试代码。顺便问一下，您是否知道如何构建节点来存储电子邮件“表”，如您在firebase的第一部分中解释的记录列表？您必须花一些时间来学习如何构建数据，就像您花一些时间为SQL表做ERDs一样。我已经更新了代码，介绍了如何向侦听器的引用添加另一个节点和无效修复

ref（'emails/'）+email）

。您还应该注意，这种方法只下载电子邮件而不是下载用户的全部信息要快得多，效率也高。非常感谢您的回答。在firebase中，这种方法效率不高，因为您将获取所有数据，只检查电子邮件。遵循本教程，它将帮助您很多这在firebase中是无效的，因为您将获取所有数据以仅检查电子邮件。遵循本教程，它将帮助您很多