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>
<li>{textData}</li>
</Container>
);
}
export default Sock;
初始返回执行初始渲染并显示所有内容。 但是当从套接字传入数据时不会重新呈现。它控制台记录一切正常。
我对钩子相当陌生,我已经以类方式实现了这一点,但目前正在重构应用程序以使用钩子代替。任何建议将不胜感激。
React 不明白 textData 会因为不更改数组上的引用而改变。你可以试试这个:
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,
...text,
]);
console.log(textData);
});
},[textData]);
return (
<Container>
<h1>Socket</h1>
{textData.map((text) => <li>{text}</li>)}
</Container>
);
}
export default Sock;
但是,为什么每次textData
更改时都要在套接字上设置处理程序呢?所以,我认为你不应该把[textData]
传递给使用效果。