如何在 vanilla ReactJS 的不同组件上的 localStorage/use 套接字上存储套接字以供在不同组件 socket.io 中使用？

Question

我想存储套接字以便我可以在不同的组件中使用它。我在登录后第一次在socket.io上设置套接字时，我将套接字设置为“套接字”状态下的状态，然后将其存储在localStorage中。

useEffect(() => {
        if(!socket) {
            setSocket(io(backendLink));
        };
    }, []) 

useEffect(() => {
        socket?.emit("newUser", localStorage.getItem('authToken'));
        localStorage.setItem('socket', JSON.stringify(socket));
    }, [socket])

然后在不同的组件中，我最初没有设置套接字的地方。我使用这样的逻辑：

useEffect(() => {
        if(!socket) socket = localStorage.getItem('socket');
        socket.emit(...)
}, [userID])

以上，如果作为存储在状态中的道具传递的套接字为空，我从 localStorage 恢复套接字并使用它来发出。但是，我得到 Uncaught TypeError: Converting circular structure to JSON.

据我了解，这是因为我在无法以这种方式转换和存储在 localStorage 上的东西上使用了 JSON.stringify，即套接字。我想使用 vanilla reactjs 将套接字用作与我使用 setSocket(io(backendLink)) 的文件不同的文件。如何使用普通 reactJS 跨不同组件使用 socket.io（无上下文，完全普通）？

Answer 1

你不应该将这些对象字符串化，如果你想在你的应用程序中引用它，你需要在将它保存在状态后将它放在 React 上下文中。这样你就可以在你的应用程序中的任何地方访问它。还有其他选择，但这是更安全的选择。

如何在 vanilla ReactJS 的不同组件上的 localStorage/use 套接字上存储套接字以供在不同组件 socket.io 中使用？

How to store socket on localStorage/use socket on different components on vanilla ReactJS for use in different components socket.io?

javascript

sockets

socket.io

reactjs

mern