从一个屏幕移到另一个屏幕时,菜单必须完整显示。在这种情况下,它不会显示列表中的所有菜单(仅显示最新元素),刷新时会显示完整菜单。当我删除一个元素时,整个菜单也会折叠,而仅保留最新的元素。移入时,该对象似乎是空的。在此处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>
);
}