import React, {useState, useEffect} from 'react';
import socketIO from 'socket.io-client';
import Container from 'react-bootstrap/Container';


function Sock() {
   const [textData, setTextData] = useState([]);

   useEffect(() => {
      const socket = socketIO('http://127.0.0.1:5009');
      socket.on('chat message', (text)  =>  {
         setTextData([
            textData.push(text)
         ]);
         console.log(textData);
      });
   },[]);

  return (
      <Container>
         <h1>Socket</h1>
            {textData.map((text) => <li>{text}</li>)}
      </Container>
  );
}

export default Sock;


在帮助下,我设法在UI上显示了一些内容,但当前它仅显示数组计数,而不显示数组内部的对象。我对React钩子还是陌生的,任何帮助或建议将不胜感激。

最佳答案

您必须将数据(文本)与现有数据(textData)连接起来,尝试:

setTextData([...textData, text]);

07-22 17:18