访问记忆函数内更新的上下文

Question

我创建了一个需要访问我的 AppContext 组件的组件（用于 websocket 通信，作为反应上下文）。

WebSocketContext 组件使用 useCallback 和 useMemo，因此每次重新渲染 AppContext 时并不总是重新创建 websocket 连接。

我不明白的是为什么当 .onmessage 执行时我无法访问 appContext 的当前值。基本上，我得到的是appContext的初始值。

如何获取当前值？

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;

Answer 1

你在

connect

中要做的就是在useCallBack中设置需要的数据，以便在需要时更新记忆的函数

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]);