Question

所以我正在学习带有react的socket.io，并且遇到了问题。我想发生的是，当用户在该字段中输入某些内容并提交时，它将成为每个输入内容的浏览器的标题。但是，如果您的文本字段等于向所有人传播的消息（这意味着可能是您单击Enter的消息），则会将标题设为“您更改了它”。

但是，似乎在io.on（message）中，当它检查输入状态是否等于消息时，总是针对该消息检查状态的初始值，即”。

我猜是因为状态为”时开始调用useEffect，所以发生了这种情况，因此它将io.on（message）硬编码为当时的状态。我想解决这个问题，我只是将输入作为useEffect的dependency数组的一部分，但这并不会覆盖当前的io.on（message），它会重载它，因此两者都被调用。不知道该如何解决！

import React from 'react'
import io from 'socket.io-client'

const SocketTest = (props: any) => {
    const socket = io('http://localhost:4000')
    const [input, setInput] = React.useState<string>('')

    const handleNewMessage = (message: string) => {
        console.log(input)
        if (input !== message){
            document.title = message
        } else {
            document.title = 'You changed it!'
        }
    }

    React.useEffect(() => {
        socket.on('message', (message: string) => {
            handleNewMessage(message)
        })
    }, [])

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInput(e.target.value)
    }

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        socket.emit('message', input)
    }

    return (
      <div>
          <h2 className="center">{ input }</h2>
          <form onSubmit={ (e) => handleSubmit(e) }>
              <input type="text" placeholder="Enter text" onChange={ (e) => handleChange(e) }/>
          </form>
      </div>
    )
}

export default SocketTest

我也确信可以通过广播消息而不是发出消息来解决此问题，但是我还要尝试学习如何解决该问题。

反应：socket.io和useEffect无法正常工作

0 个答案: