gpt4 book ai didi

javascript - React Hooks 和 UseEffect 不使用 socketIO 数据更新显示

转载 作者:行者123 更新时间:2023-11-30 13:45:43 26 4
gpt4 key购买 nike

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;

初始返回进行初始渲染并显示所有内容。但是当从套接字传入数据时不会重新呈现。它控制台记录一切正常。

我对 Hook 相当陌生,我已经通过类方式实现了这一点,但目前正在重构应用程序以改用 Hook 。任何建议将不胜感激。

最佳答案

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 发生变化时都需要在 socket 上设置处理程序?所以,我认为你不应该将 [textData] 传递给 useEffect。

关于javascript - React Hooks 和 UseEffect 不使用 socketIO 数据更新显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59373551/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com