Javascript 聊天室中消息的顺序

过了一段时间，我将重新开始编程。我写过一次聊天应用。现在我想改变一下。目前，聊天室中的新消息显示在消息列表的顶部。我想把它放在底部。我想我必须对状态更新做些什么。请告诉我它在哪里

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>
    );

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={users:[]，messages:[]，text:''，name:''}；
}
componentDidMount（）{
socket.on（'message'，message=>this.messageReceive（message））；
socket.on（'update'，（{users}）=>this.chatUpdate（users））；
}
消息接收（消息）{
const messages=[message，…this.state.messages]；
this.setState（{messages}）；
}
聊天室更新（用户）{
this.setState（{users}）；
}
handleMessageSubmit（消息）{
const messages=[message，…this.state.messages]；
this.setState（{messages}）；
发出（'message'，message）；
}
handleUserSubmit（名称）{
this.setState（{name}）；
emit（'join'，name）；
}
render（）{
返回this.state.name！=''(
this.renderLayout（）
)：this.renderUserPerform（）
}
renderLayout（）{
返回(
聊天应用
应用室
this.handleMessageSubmit（message）}
name={this.state.name}
/>
);

---

}

只需更改此处理程序

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()}
/>