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]);