React Hooks & UseEffect 不会使用socketIO数据更新显示。仅呈现数组中的元素

Question

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 钩子相当陌生，任何帮助或建议将不胜感激。

Answer 1

处理过时闭包的方法很少，但对于您的简单情况，您可以使用函数更新语法来获取以前的文本数据，并返回数组的新实例(不要改变现有状态，使用push(。

useEffect(() => {
const socket = socketIO("http://127.0.0.1:5009");
socket.on("chat message", text => {
setTextData(previousTextData => [...previousTextData, text]);
});
}, []);

使用回调方法，你不需要把textData放在useEffect的依赖数组中。

Answer 2

您必须将数据(文本(与现有数据(textData(连接起来，请尝试：

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