Javascript 为什么可以'；我不能推动这一行动吗？

我正在创建一个聊天室应用程序，目前我正在关闭本地功能。我已经创建了一个测试对象来保存聊天室数据，包括消息。现在，我有了一个用于聊天的文本输入字段，但我似乎无法访问聊天室对象中的消息以将新消息推入。当我在console.log中记录state.messages时，我似乎得到了这个奇怪的代理对象，而不是消息数组。有人知道这是为什么吗？这是我的密码：

JSX:

减速器：

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

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

export const { addChat } = chatSlice.actions

export const selectChat = state => state.messages

export default chatSlice.reducer

控制台日志：

---

Redux Toolkit中的

createSlice

函数使用库来允许编写直接修改状态的还原程序。减速器中的

状态

对象是当前状态的“草稿状态”代理

要快照和打印“草稿状态”，请使用Redux Toolkit从Immer重新导出的

current

功能。下面是一个例子：

---

Redux Toolkit中的

createSlice

函数使用该库来允许编写直接修改状态的还原程序。减速器中的

状态

对象是当前状态的“草稿状态”代理

要快照和打印“草稿状态”，请使用Redux Toolkit从Immer重新导出的

current

功能。下面是一个例子：

---

状态是不可变的。您不应该在减速器内使用

Array.prototype.push

。您应该使用扩展运算符

…

将

状态复制到新数组中。而不是将消息

复制到新数组中。浅层复制现有状态，浅层复制数组，然后将新元素添加到数组中，不要忘记从reducer函数返回新的state对象。我怀疑您将javascript对象视为redux实现细节，因为您正在控制台记录内部的中间“状态”，而不是reducer应该返回的状态*/*状态。状态是不可变的。您不应该在减速器内使用

Array.prototype.push

。您应该使用扩展运算符

…

将

状态复制到新数组中。而不是将消息

复制到新数组中。浅层复制现有状态，浅层复制数组，然后将新元素添加到数组中，别忘了从reducer函数返回新的state对象。我怀疑您将javascript对象视为redux实现细节，因为您正在控制台记录内部的中间“状态”，而不是reducer应该返回的状态*/*。

let chatData = [
    {
        name: "General Chatroom",
        private: false,
        passcode: null,
        currentUsers: [],
        messages: [
            {
                avatar: "#",
                username: 'Chatter[bot]',
                message: `Welcome to Chatter[box]! This is the beginning of this chatroom's history!`
            },
        ]
    }
]

export default chatData

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

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

export const { addChat } = chatSlice.actions

export const selectChat = state => state.messages

export default chatSlice.reducer

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

const slice = createSlice({
  name: 'todos',
  initialState: [{ id: 1, title: 'Example todo' }],
  reducers: {
    addTodo: (state, action) => {
      console.log('before', current(state))
      state.push(action.payload)
      console.log('after', current(state))
    },
  },
})