Question

operator delete

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

我对钩子还很陌生，我已经以类的方式做到了这一点，但是目前正在重构应用程序以使用钩子。任何建议将不胜感激。

Answer 1

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]来使用useEffect。

React Hooks＆UseEffect不使用socketIO数据更新显示

1 个答案: