为什么chatMsgStore.addChatMsg(bdmsg)不影响存储

Question

store.js

import {useLocalObservable} from "mobx-react-lite";
function chatStore() {
return {
chatmsg: [],
setChatMsg(arr) {
this.chatmsg = arr
},
addChatMsg(msg) {
this.chatmsg.push(msg)
}
}
}
export const useChatStore = () => useLocalObservable(chatStore)

app.js

const App = () => {
const chatMsgStore = useChatStore()
const AppFunctions = {chatMsgStore}
useEffect(() => {
socket.on(activechat.chatid, (bdmsg) => {
chatMsgStore.addChatMsg(bdmsg)
})
return () => {
socket.off(activechat.chatid)
}
}, [activechat, chatMsgStore.chatmsg])
return (
<>
<AppContext.Provider value={AppFunctions}>
.....................
</AppContext.Provider>
</>
)
}
export default App;

fetch.js

async function getChatMessages(url, body, userStore, chatMsgStore) {
........
chatMsgStore.setChatMsg(firstResData)
........

在应用程序加载时，我添加了一个套接字侦听器，deps是activechat和chatMsgStore
此侦听器是动态的，必须在deps更改时进行更改
此侦听器的唯一目的是向存储中添加消息，并重新呈现观察器组件

deps:
activechat-非存储状态
chatMsgStore.chamsg-存储状态

为什么chatMsgStore.addChatMsg(bdmsg(不影响存储？因此，在App.js中嵌套很深的组件不会被重新渲染。

否则，我有一个函数getChatMessages，我从设置消息的App.js内部的自定义钩子导入它。这个函数不是App.js的子函数，也没有用observer封装。setChatMsg(firstResData(有效！我可以设置消息，以便观察者组件将重新呈现
如何使上面的代码生效？

Answer 1

您的App组件没有用observerHOC封装，因此它不会对observable值的更改做出反应。

像这样包装：

const App = observer(() => {
// ...
})

或导出时：

export default observer(App)

文档中的更多信息

Answer 2

为了正确设置useEffect中的反应性，您应该使用mobx中的autorun，这里有一个指向文档的链接，解释了为什么以及如何使用它。

但我认为您不应该将chatMsgStore.chatmsg放在deps数组中，因为您没有在useEffect中使用它。

如果你能提供一个工作的例子，也许我们可以进一步帮助你。