useContext returns undefined 当我的 redux store 更新时

Question

我无法理解为什么当 redux 存储更新时我的 useContext 值从预期值更新为未定义。我正在使用 create context 来容纳我的套接字连接以供讨论。以下是我的上下文class

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) 更改为未定义。如果我注释掉更新 redux 存储的部分，它会按预期工作。我的理论是 redux store provider 在链中比我的 WebSocketProvider 更高，但我无法确认。

Answer 1

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

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

useContext returns undefined 当我的 redux store 更新时

useContext returns undefined when my redux store updates

reactjs

redux

use-context