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

Question

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

但是，似乎在 io.on(message) 中，当它检查输入状态是否等于消息时，它总是根据消息检查状态的初始值，即 ''。

我猜这是因为当状态为''时在开始时调用useEffect，所以它将io.on（消息）硬编码为当时的状态。我想解决这个问题，我只需将 input 作为 useEffect 的依赖数组的一部分，但这不会覆盖当前的 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

我也确信我可以通过广播消息而不是发出消息来解决这个问题，但我更想学习如何解决这个问题。

标签： reactjssocket.io