Question

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

Answer 1

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

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

如何获取createSlice（）更新页面？

1 个答案: