React / Firebase setState无更新

时间:2018-05-21 14:40:56

标签: reactjs

我遇到了用户在表单上提交电子邮件地址的问题。电子邮件地址在firebase数据库中查找...然后绑定到一些将被推送到数组中的其他数据。 不幸的是,我目前不得不点击提交按钮两次才能让证书正确呈现。我一直在查看有关回调等的不同信息。我已经简化了用户单击提交后运行的代码。如果这是一个重复的问题,请道歉......我找到的任何信息都没有让我朝着正确的方向前进。回到原点。

processEmail(e) {
var certs = [];


e.preventDefault();

Fire.database().ref().orderByChild('Email').equalTo(this.inputEl.value).on('value', function(snapshot) {
  if (snapshot.exists()) {
    snapshot.forEach(function(childSnapshot) {

      var key = childSnapshot.key;


      certs.push(snapshot.child(key+"/Item").val());


  })

  } else {
    console.log('nope');
    alert("Looks like we can't find you.");
  }

})


this.setState({
  cert: certs
});
}

1 个答案:

答案 0 :(得分:0)

所以我想出来了。感谢Gabriele指出我正确的方向。以下是一些可能会在将来发现这些内容的更新代码。注意事项......无法在Firebase调用中使用“this”,所以不得不让updateState = this。此外,当推送到数组时,将数组保持在循环之外,否则它将仅为每次迭代使用单个值重置自身。很容易。

processEmail(e) {

e.preventDefault();

let updateState = this;

Fire.database().ref().orderByChild('Email').equalTo(this.inputEl.value).on('value', function(snapshot) {
  if (snapshot.exists()) {
    var certs = [];
    snapshot.forEach(function(childSnapshot) {


      var key = childSnapshot.key;

      certs.push(snapshot.child(key+"/Item").val());

      first.push(snapshot.child(key+"/First Name").val());

      lastN.push(snapshot.child(key+"/Last Name").val());

      updateState.setState({
        cert: certs
      });


  })

  } else {
    console.log('nope');
    alert("Sorry! Looks like we can't find you.");
  }

})

}