当我的 redux 商店更新时，useContext 返回 undefined答案

【问题标题】：useContext returns undefined when my redux store updates当我的 redux 商店更新时，useContext 返回 undefined
【发布时间】：2021-06-01 23:06:58
【问题描述】：

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

【问题讨论】：

标签： reactjs redux use-context

【解决方案1】：

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

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

【讨论】：