I created a component (for websocket communication, as a react context) that needs to access to my AppContext component.
The WebSocketContext component makes use of useCallback and useMemo , so that the websocket connection is not alway re-created on every re-render of AppContext.
What I cannot figure out is why I cannot access to the current value of appContext when .onmessage executes. Basically, what I get is the initial value of appContext.
What can I do to get the current value ?
App.js
<AppContext>
<WebSocketProvider>
...
WebSocketContext.js
import React, { useEffect, useContext, useCallback, useMemo, useState } from 'react';
import { w3cwebsocket as W3CWebSocket } from "websocket";
import { AppContext } from "./AppContext.js";
export const WebSocketContext = React.createContext(null);
const WebSocketProvider = ({ children }) => {
const [appContext, setAppContext] = useContext(AppContext);
const [wsClient, setWsClient] = useState(null);
const sendMessage = useCallback((message) => {
wsClient.send(message);
});
const connect = useCallback(() => {
console.log(Date.now(), appContext.activeZone); //access to current value of appContext is OK
let tmpWsClient = new W3CWebSocket("wss://127.0.0.1:5000");
tmpWsClient.onmessage = (message) => {
const msgObj = JSON.parse(message.data);
console.log("[Message received!]", Date.now(), appContext.activeZone); //not the current value of appContext! (actually, the initial value)
};
tmpWsClient.onopen = (event) => { ... };
tmpWsClient.onclose = (event) => { ... };
tmpWsClient.onerror = (err) => { ... };
return tmpWsClient;
});
//at 1st render of the component, create websocket client
useEffect(() => {
if (!wsClient) {
const tmpWsClient = connect();
//set websocket context
setWsClient(tmpWsClient);
}
}, []);
//this triggers as expected
useEffect(() => {
console.log("activeZone change detected:", appContext.activeZone);//access to current value of appContext is OK
}, [appContext.activeZone]);
const contextValue = useMemo(
() => ({
client: wsClient,
sendMessage
}), [wsClient, sendMessage]);
return (
<WebSocketContext.Provider value={contextValue}>
{children}
</WebSocketContext.Provider>
);
};
const context = ({children}) => WebSocketProvider({children});
export default context;
What you have to do in connect
is to set in you useCallBack the data needed to update the memorized function whenever is needed
const connect = useCallback(() => {
console.log(Date.now(), appContext.activeZone);
let tmpWsClient = new W3CWebSocket("wss://127.0.0.1:5000");
tmpWsClient.onmessage = (message) => {
const msgObj = JSON.parse(message.data);
console.log("[Message received!]", Date.now(), appContext.activeZone);
(actually, the initial value)
};
tmpWsClient.onopen = (event) => { ... };
tmpWsClient.onclose = (event) => { ... };
tmpWsClient.onerror = (err) => { ... };
return tmpWsClient;
},[appContext]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.