javascript - 聊天 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});
}
推荐阅读
- javascript - Assign type-module (@type/lodash) to minified localized version of lodash
- javascript - 如何修复打开并刷新页面后自动关闭的弹出窗口?
- powershell - 在 PowerShell 的替换运算符中使用格式运算符
- database - 如何在刷新时重新渲染 Flatlist?
- arduino - esp8266继电器实时读取继电器状态
- consul - 带有 ocelot 和 consul 的动态服务名称
- java - HttpUrlConnection connect() 方法返回 IOException,仅来自 android 9(饼图)
- objective-c - 替换现有执行程序时调度程序附加错误!!!编号:88
- excel - vba excel 2010中意外的自主更改a1 / r1c1表示法
- php - 带有重音字符的 SQL 查询