刷新页面时,Array数据将被覆盖Firebase React js

时间:2019-11-19 16:37:47

标签: arrays reactjs firebase

我想在Firebase数据库中添加主题列表。数据库中的每个用户将能够添加他们唯一的主题列表。 它可以正确添加数据,但是当我刷新它并尝试在列表中添加另一个项目时,数据库中的列表将被删除并覆盖。我怎样才能解决这个问题?

constructor(props){
    super(props);
    this.state = {


        list:[],

    };

}



  onSubmitL = e => {

    e.preventDefault();
    const db = firebase.firestore();
    var change = this.state.list;

    //this.state.list.push(this.state.temp);
    var textbox = document.getElementById("list");
    var temp = textbox.value;

    if (temp.length == 0) {
      console.log("input empty!");
    } else {
      this.state.list.push(temp);
    }


    console.log("current " + this.state.list);
    db.collection("users").where("email", "==", firebase.auth().currentUser.email)
      .get()
      .then(snapshots => {
        snapshots.forEach(doc => {
          const docData = doc.data();
          doc.ref.update({

            list: this.state.list,
          });
        })

      })
      .catch(function(error) {
        console.log("Error getting documents: ", error);
      });

      this.state.item="";

    };

  updateList = e => {
  };





render () {
  const { currentUser } = this.state
    return (
        <div>

            <form onSubmit={this.onSubmitL}>
                <input 
                    name="topics"
                    id="list"
                    onChange={this.onChange}
                    type='list'
                    placeholder="list"
                    onChange={this.updateList}  

                />

                 <button  type="submit">Apply Changes</button>

            </form>

            <div>

      </div>

        </div>
    );
}

1 个答案:

答案 0 :(得分:0)

我不知道这是否是唯一的问题,但应该是

snapshots.docs.forEach(doc => { ...

不是

snapshots.forEach(doc => { ...

您也许可以尝试将... doc(doc.id)set(){ merge: true }一起使用

 db.collection("users").where("email", "==", 
  firebase.auth().currentUser.email)
  .get()
  .then(snapshots => {
    snapshots.docs.forEach(doc => {
      const docData = doc.data();
      doc.ref.update({

        list: this.state.list,
      });
    })

  })

请参阅https://firebase.google.com/docs/firestore/manage-data/add-data?authuser=0