在useso内的websocket上多次连接

Question

我有一个useEffect，它具有连接到套接字的函数，并且需要更新的状态，所以我将状态放入useEffect的数组中，问题是，它多次连接到websocket，如何实现一个函数将一次连接到网络套接字并有权访问更新状态

const [chats, setChats] = useState([])

useEffect(() => {
    async function getDatas() {
        try {
            const {data: resChats} = await chatApi.getChats()
            setChats(resChats.reverse())
        } catch (error) {
            console.log(error)
        }
    }

    getDatas()
}, [])

useEffect(() => {
    socket.on('chat', (data) => {
        const chatsCopy = JSON.parse(JSON.stringify(chats))
        chatsCopy.push(data)
        setChats(chatsCopy)
    })
}, [chats, reduxState1, reduxState2])

我将reduxState1和reduxState2放在useEffect的数组上，因为我也使用它们的更新状态在它们上建立了套接字连接，问题也适用于redux。

但是当我删除useEffect数组中的状态时，它将始终只使用初始状态

我从客户端使用socket.io-client进行websocket连接