reactjs - 修改可以调用方法的变量/对象

Question

我有一个名为socket. 我也可以通过导入它在组件中使用它import socket from '../Socket'，socket然后我可以在组件中再次使用它。问题是，我想在这个文件中调用一个方法，但是当我这样做时，我得到了错误Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons ...。我尝试过的看起来像这样

import io from 'socket.io-client'
import UseChat from "./Usechat"
const Socket = () => {

    console.log('SOCKET ERSTELLT')

    const SOCKET_URL = 'http://localhost:4000'
    
    const socket = io(SOCKET_URL)
    const { updateMessages } = UseChat()


    socket.on('newChatMessage', (message) => {
        console.log('*Nachricht empfangen*', message)
        updateMessages(message);
    })


    return { socket }
}

export default Socket

现在我的问题是，是否有重写此对象/变量的选项，以便我只创建此对象/变量一次并每次引用同一个，同时构建一个也可以调用方法的“真实函数”？

这就是我所拥有的

import io from 'socket.io-client'

console.log('SOCKET ERSTELLT')
const SOCKET_URL = 'http://localhost:4000'
const socket = io(SOCKET_URL)

socket.on('newChatMessage', (message) => {
    console.log('*Nachricht empfangen*', message)
    // Here I want to call the method updateMessages or setState for setMessages
})

export default socket

我要调用的对象数组函数

const UseChat = (roomId) => {
    const [messages, setMessages] = useState([])

    useEffect(() => {
    }, [roomId])


    const sendMessage2 = (messageBody, timeStamp, chatname) => {
        console.log('Bin bei Socket io ind sende')
        socket.emit('message', {
            body: messageBody,
            timestamp: timeStamp,
            senderId: cookie.load('userData').id,
            //roomid: chatname,
            roomid: chatname
        })
    }

    const updateMessages = (message) => {
        const incomingMessage = {
            ...message,
            ownedByCurrentUser: message.senderId === 1 /*socket.id*/,
            timestamp: message.timestamp,
        }

        console.log(incomingMessage)

        setMessages((messages) => [...messages, incomingMessage])
    }

    return { messages, sendMessage2, setGrosseJosn, updateMessages }
}

export default UseChat

标签： reactjs