[英]Order of messages in chat React
我會在一段時間后回到編程。 我寫了一次chatApp。 現在我想在那里改變一些東西。 目前,聊天新消息顯示在消息列表的頂部。 我想把它放在底部。 我想我必須做一些狀態更新。 請告訴我它在哪里。
class App extends Component {
constructor(props) {
super(props);
this.state = {users: [], messages: [], text: '', name: ''};
}
componentDidMount() {
socket.on('message', message => this.messageReceive(message));
socket.on('update', ({users}) => this.chatUpdate(users));
}
messageReceive(message) {
const messages = [message, ...this.state.messages];
this.setState({messages});
}
chatUpdate(users) {
this.setState({users});
}
handleMessageSubmit(message) {
const messages = [message, ...this.state.messages];
this.setState({messages});
socket.emit('message', message);
}
handleUserSubmit(name) {
this.setState({name});
socket.emit('join', name);
}
render() {
return this.state.name !== '' ? (
this.renderLayout()
) : this.renderUserForm()
}
renderLayout() {
return (
<div className={styles.App}>
<div className={styles.AppHeader}>
<div className={styles.AppTitle}>
ChatApp
</div>
<div className={styles.AppRoom}>
App room
</div>
</div>
<div className={styles.AppBody}>
<UsersList
users={this.state.users}
/>
<div className={styles.MessageWrapper}>
<MessageList
messages={this.state.messages}
/>
<MessageForm
onMessageSubmit={message => this.handleMessageSubmit(message)}
name={this.state.name}
/>
</div>
</div>
</div>
);
}
只需更改此處理程序。
messageReceive(message) {
const messages = [message, ...this.state.messages];
this.setState({messages});
}
為了將新消息附加到底部。
messageReceive(message) {
const messages = [...this.state.messages, message];
this.setState({messages});
}
您可以反轉消息數組並將其傳遞給MessagesList
<MessageList
messages={this.state.messages.reverse()}
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.