我无法理解为什么当 redux 存储更新时我的 useContext 值从预期值更新为 undefined 。我正在使用创建上下文来容纳我的套接字连接以进行讨论。以下是我的上下文类
import React, { createContext, useRef } from 'react'
export const WebSocketContext = createContext()
export default ({ children }) => {
const webSocket = useRef(null);
let ws;
const openedDiscussionID = useSelector(state => state.presence.discussionId || '')
const sendMessages = (messageObject) => {
webSocket.current.send(JSON.stringify(messageObject))
}
if (!webSocket.current){
webSocket.current = new WebSocket(``)
webSocket.current.onmessage = (message) => {
const discussionMessage = JSON.parse(message.data)
};
ws = {
webSocket: webSocket.current,
sendMessages
}
}
return(
<WebSocketContext.Provider value={ws}>
{children}
</WebSocketContext.Provider>
)
}
我目前在名为 projectDetailContainer 的父组件中使用它,
import WebSocketProvider from '../../redux-state/middleware/socketService'
function ProjectDetailContainer() {
return (
<WebSocketProvider>
<div>parent component</div>
</WebSocketProvider>
)
}
export default ProjectDetailContainer
在链的某个地方,我有以下讨论部分:
import { WebSocketContext } from '../../redux-state/middleware/socketService'
function DiscussionOptionContainer() {
const ws = useContext(WebSocketContext)
...
useEffect(() => {
if(openedDiscussion.title?.length){
dispatch(setOpenDiscussion(openedDiscussion))
}
},[openedDiscussion])
const sendMessage = () => {
const mes = {
action:'discussion',
message:{
customerId:'7240304',
projectId:projectId,
message:message,
itemId:openedDiscussion.discussionId,
sender: me
}
}
debugger
ws.sendMessages(mes)
}
...}
我注意到的是,一旦应用程序加载,我就会看到 sendMessages 函数被返回,但是一旦发生调度,它就会将 ws (useContext) 更改为 undefined。如果我注释掉更新 redux 存储的部分,它会按预期工作。我的理论是 redux store provider 在链中比我的 WebSocketProvider 更高,但我无法确认。
useSelector
选定值更改时触发rerender。ws
默认情况下未定义,如果webSocket.current
为假则获取一个值。它似乎只发生在初始渲染上。每个连续的渲染都将设置ws
为 undefined 并将其传递给WebSocketContext.Provider
.
尝试在ws = {.....}
外部条件下移动。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句