如何让 createSlice() 更新我的页面？答案

【问题标题】：How can I get createSlice() to update my page?如何让 createSlice() 更新我的页面？
【发布时间】：2021-02-02 16:53:40
【问题描述】：

我正在创建一个聊天室应用程序，并且我一直在学习 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 和一些控制台日志更新，但同样，页面不会相应更新。

【问题讨论】：

标签： javascript reactjs react-redux jsx redux-toolkit

【解决方案1】：

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

您没有正确地将状态映射到您的组件，可能是拼写错误？
修改了组件的 shouldComponentUpdate 方法以防止组件重新渲染。

【讨论】：