在另一个上下文中使用上下文

Question

所以我有这两个上下文，UserContext 和 SocketContext。问题是——我需要将用户的详细信息（手机号码）传递给套接字上下文，以便在套接字初始化时自动加入所需的房间。

这就是 app.js 的样子：

function App() {

  const [user, setUser] = useState(null);

  useEffect(() => {
    (async () => {
      const res = await fetch("/api/me", {
        credentials: "include"
      })
      if (res.status === 200) {
        const json = await res.json()
        setUser(json.user)
      }
    })();    
  }, [])

  return (
    <UserContext.Provider value={user}>
      <SocketContext.Provider value={socket}>
        <Switch>
          ... routes
        </Switch>
      </SocketContext.Provider>
    </UserContext.Provider>
  )
}

export default App;

我在加载组件时获取用户并将值设置为用户，然后将其传递给用户上下文。

UserContext

export const UserContext = createContext(null);

SocketContext:

import { io } from "socket.io-client";

const socket = io("http://localhost:3000", { autoConnect: false });
socket.connect();
// socket.connect({ auth: { token: user.mobile_number } });

export { socket };
export const SocketContext = createContext();

这里，我需要传递用户的手机号码。我不能在这里提出任何获取请求，因为它们只允许在组件内部使用。我也不能在这里访问 UserContext。我不能将此（套接字）代码放在任何其他组件中，因为这将使它在每次重新呈现组件时重新连接套接字。

有没有办法在套接字上下文中访问用户？或者我可以通过任何其他不涉及使用上下文的方式来做到这一点？

Answer 1

您将 SocketContext 包装在函数组件中并使用 useContext 访问其中的其他上下文，如下所示：

const SocketContext = createContext();

const SocketProvider = ({ value, children }) => {
  const user = useContext(UserContext);
  console.log(user);

  return (
    <SocketContext.Provider value={value}>
      {children}
    </SocketContext.Provider>
  );
};

用法：

  return (
    <UserContext.Provider value={user}>
      <SocketProvider value={socket}>
        <Switch>
          ... routes
        </Switch>
      </SocketProvider>
    </UserContext.Provider>
  )

在另一个上下文中使用上下文

Using context within another context

socket.io

reactjs

react-context