如何获取createSlice更新页面？

如何解决如何获取createSlice更新页面？

我正在创建一个聊天室应用程序，并且在学习Redux Toolkit的过程中。我当前有文本输入，当单击“发送”时，它将输入到消息数据对象；但是，我似乎无法让页面更新和呈现新消息。有人知道为什么吗？

减速器：

import { createSlice,current } from '@reduxjs/toolkit'
import chatData from '../../components/chatData'

export const chatSlice = createSlice({
    name: 'chat',initialState: chatData[0],reducers: {
        addChat: (state,action) => {
            if (action.payload !== '') {
                state.messages.push({
                    avatar: "#",username: "",message: action.payload
                })
                console.log('after',current(state))
            }
            console.log(action.payload);
        },},});

export const { addChat } = chatSlice.actions

export const selectChat = state => state.messages

export default chatSlice.reducer

JSX：

<div>
    {props.chatData.messages.map((val,i) => {
        return <MessageBox username={val.username} avatar={val.avatar} message={val.message} />
    }
</div>

状态确实会根据Redux DevTools和一些控制台日志记录进行更新，但是页面不会相应地更新。

解决方法

如果状态确实在商店中更新，那么我认为问题是由您的组件引起的：

1. 您没有正确地将状态映射到组件，可能是拼写错误？

2. 已修改组件的shouldComponentUpdate方法，以防止重新呈现组件。