当我的 redux 存储更新时 useContext 返回 undefined

奥马尔赛德

我无法理解为什么当 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 更高,但我无法确认。

宇进T34

useSelector选定值更改时触发rerender。ws默认情况下未定义,如果webSocket.current为假则获取一个值它似乎只发生在初始渲染上。每个连续的渲染都将设置ws为 undefined 并将其传递给WebSocketContext.Provider.

尝试在ws = {.....}外部条件下移动

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

当我尝试访问 redux 状态时,它返回 undefined

React - useContext 返回 undefined

当我保存方法的返回时,它会保存 undefined

React Context 使用 useContext 返回 undefined

React-native useContext 返回 undefined

useContext 返回 undefined (React Native, Expo)

为什么函数 getSafestCountriesNames() 在我调用它时返回 promise{pending} 而当我使用 async/await 时它返回 undefined?

每当我尝试访问它时,Vue 都会将 vm 返回为 undefined

当我尝试访问元素的数据时,为什么jQuery返回undefined?

当我使用 mongoose .populate.exec 方法时,Model.findById 返回 undefined

当我使用.value获取输入值时,它返回Undefined

当我在 Agular 的其他组件中使用服务类函数时返回 undefined

即使使用默認值,useContext 也返回 undefined

我创建了一个类但是当我调用它的属性时它返回 undefined

当我使用 express 路由器时,req.body 返回 undefined,即使我使用 express.urlencoded

当我更改 Redux 状态时,文本不会更新

当我更新 Store 时 Redux 不会重新渲染

使用Redux-Promise和Axios时,Reducer返回undefined

useContext - 当我在孩子中设置状态时,我的父母不会呈现

为什么当我尝试在 react.js 中获取图像的高度和宽度时返回 undefined

当我返回类时出现 AttributeError

当我运行它时,BeautifulSoup返回[]

当我希望它返回“-”时,Excel 公式返回数值

当我调用数据时,我的 api 总是返回 null

Redux store 中的值总是返回 undefined

当我最初在 `<Provider>` 中分配它时,如何从子组件访问 `react-redux` 存储?>

useContext返回udefined

在反应中,当我路由到另一个页面时,useReducer存储会丢失状态。useContext仅加载初始状态

当我读取 json 数据时,获取 `undefined is not an object`