为什么无法从firebase数据库获取路径中的所有对象以做出反应?

时间:2018-07-14 14:07:02

标签: javascript reactjs firebase firebase-realtime-database

从一个屏幕移到另一个屏幕时,菜单必须完整显示。在这种情况下,它不会显示列表中的所有菜单(仅显示最新元素),刷新时会显示完整菜单。当我删除一个元素时,整个菜单也会折叠,而仅保留最新的元素。移入时,该对象似乎是空的。在此处enter image description here输入图像描述  enter image description here

componentDidMount(){
  this.setState({ ...this.state, messages: [] });

  let messagesRef = fire.database().ref('vendor/'+this.state.Day+'/'+this.state.Vendor+'/dishname').orderByKey().limitToLast(100);
  messagesRef.on('child_added', snapshot => {
    /* Update React   state when message is added at Firebase Database */
    let message1 = { text: snapshot.val(), id: snapshot.key };
    console.log(this.state.messages);
    this.setState({ ...this.state, messages: this.state.messages.concat(message1) });
  })
}
addMessage(e){      
  var newData={
  Type: this.inputE3.value,
  Dish: this.inputEl.value,
  Price : this.inputE2.value
}
       fire.database().ref('vendor/'+this.state.Day+'/'+this.state.Vendor+'/dishname').push(newData);

this.inputEl.value = ''; 
this.inputE2.value = ''; 
this.inputE3.value = ''; 
let messagesR = fire.database().ref('vendor/'+this.state.Day+'/'+this.state.Vendor+'/dishname').orderByKey().limitToLast(100);
messagesR.on('child_added', snapshot => {
  /* Update React   state when message is added at Firebase Database */
  let message1 = { text: snapshot.val(), id: snapshot.key };
  this.setState({ ...this.state, messages: this.state.messages.concat(message1) });
})
} 
remove(id){
  // console.log(this.state)
  let a = fire.database().ref('vendor/'+this.state.Day+'/'+this.state.Vendor+'/dishname/'+id)
  a.remove()
  this.setState({ ...this.state, messages: [] });
  //  this.componentDidMount();
}

render(){
  return(
    <ul>
      {this.state.messages ? this.state.messages.map( (message1) => <li id='oneline' key={message1.id}><div id='one' >{message1.text.Type} </div><div id='one' > {message1.text.Dish} </div><div id='one' > {message1.text.Price}</div> <Button className='submit' onClick={this.remove.bind(this, message1.id)}>Remove</Button></li> ) : (null)}
    </ul>
  );
}

0 个答案:

没有答案