Reactjs 使用Socket.io进行反应-继续在“上重新渲染”；插座.on"；事件

我正在尝试编写一个客户端，它打开一个与服务器的socket.io连接，然后用服务器通过socket发送的更新的数字连续地重新呈现屏幕。我找不到要更新的号码。“速度”值保持在10。有什么问题吗显然，这是我理解上的一个基本错误。谢谢

客户端代码：

  import React from 'react';
    import {CircleGauge} from 'react-launch-gauge';
    import io from 'socket.io-client';


    class App extends React.Component {
        constructor(props, context) {
            super(props, context)
            this.state = {
                speed: 10
            };
        }
        componentDidMount() {
            const socket = io.connect('http://localhost:5000');
            socket.on( 'data update', data => this.setState({speed: data}));
            console.log("got the speed: " + this.state.speed);
        }

        render() {
            return (
                <div>
                    <p> The velocity received is: {this.state.speed}  </p>
                </div>
            );
        }
    }
    export default App;

---

很接近，但在客户端上设置套接字的方式存在一些小问题

首先，您设置的套接字与文档建议的稍有不同

componentDidMount() {
  // io() not io.connect()
  this.socket = io('http://localhost:5000');

  this.socket.on(
    // consider renaming this to 'data_update' or just 'update'
    'data update', 
    data => 
      this.setState(
        { speed: data },
        // the second parameter to setState will be called on completion, so you'll log every time the speed changes
        () => console.log("got the speed: " + this.state.speed)
      )
  );

  this.socket.open();
}

最后，当您的组件卸载时，您需要关闭套接字：

componentWillUnmount() {
  this.socket.close();
}

---

在下面检查我的工作代码：

import React, { useEffect, useState, useRef } from 'react'
import socket from 'socket.io-client'

const Chatbox = () => {
  const [chats, setChats] = useState([])
  const [message, setMessage] = useState('')
  const socketClientRef = useRef()

  useEffect(() => {
    const client = socket("http://localhost:3002");
    client.on("connect", () => {
      console.log('connected')
    })
    client.on("disconnect", () => {
      console.log('diconnected')
    });
    client.on("chat", message => {
      setChats(prevChats => [...prevChats, message])
      // INSTEAD OF:
      // setChats([...chats, message])
    });
    socketClientRef.current = client
    return () => {
      client.removeAllListeners()
    }
  }, [])

  const handleSend = async () => {
    socketClientRef.current.emit('chat', {
      room: `event-${eventId}`,
      message
    })
    setMessage('')
  }


  return (
    <div>
      <div>
        <h1>Messages</h1>
        {chats.map(chat => (
          <div>{chat}</div>
        ))}
      </div>
      <div>
        <input value={message} onChange={e => setMessage(e.target.value)} />
        <button onClick={handleSend}>Send</button>
      </div>
    </div>
  )
}

import React，{useffect，useState，useRef}来自“React”
从“socket.io客户端”导入套接字
常量聊天框=（）=>{
const[chats，setChats]=useState（[]
const[message，setMessage]=useState（“”）
const socketClientRef=useRef（）
useffect（（）=>{
const client=socket（“http://localhost:3002");
client.on（“连接”，（）=>{
console.log（'已连接'）
})
client.on（“断开连接”，（）=>{
console.log（'diconnected'）
});
client.on（“聊天”，消息=>{
setChats（prevChats=>[…prevChats，消息]）
//而不是：
//setChats（[…chats，message]）
});
socketClientRef.current=客户端
return（）=>{
client.removeAllListeners（）
}
}, [])
const handleSend=async（）=>{
socketClientRef.current.emit（'chat'{
会议室：`event-${eventId}`，
消息
})
设置消息（“”）
}
返回(
信息
{chats.map（chat=>(
{chat}
))}
setMessage（e.target.value）}/>
发送
)
}

谢谢你的回答，卢克，但这并没有解决问题。出于某种原因，在服务器发送最终值99之前，控制台不会显示任何输出（速度也不会改变）。此时，将打印所有80个日志，并将速度更新为99

import React, { useEffect, useState, useRef } from 'react'
import socket from 'socket.io-client'

const Chatbox = () => {
  const [chats, setChats] = useState([])
  const [message, setMessage] = useState('')
  const socketClientRef = useRef()

  useEffect(() => {
    const client = socket("http://localhost:3002");
    client.on("connect", () => {
      console.log('connected')
    })
    client.on("disconnect", () => {
      console.log('diconnected')
    });
    client.on("chat", message => {
      setChats(prevChats => [...prevChats, message])
      // INSTEAD OF:
      // setChats([...chats, message])
    });
    socketClientRef.current = client
    return () => {
      client.removeAllListeners()
    }
  }, [])

  const handleSend = async () => {
    socketClientRef.current.emit('chat', {
      room: `event-${eventId}`,
      message
    })
    setMessage('')
  }


  return (
    <div>
      <div>
        <h1>Messages</h1>
        {chats.map(chat => (
          <div>{chat}</div>
        ))}
      </div>
      <div>
        <input value={message} onChange={e => setMessage(e.target.value)} />
        <button onClick={handleSend}>Send</button>
      </div>
    </div>
  )
}