时间戳

首页 > 解决方案 > 当我的 redux 商店更新时，useContext 返回 undefined

reactjs - 当我的 redux 商店更新时，useContext 返回 undefined

问题描述

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

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 更高，但我无法确认。

标签： reactjsreduxuse-context

解决方案

useSelectortriggers a rerender when selected value changes. ws默认情况下是未定义的，如果webSocket.current是假的，则获取一个值。而且它似乎只发生在初始渲染上。每个连续的渲染都将设置ws为 undefined 并将其传递给WebSocketContext.Provider.

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

推荐阅读