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>
        <li>{textData}</li>
     </Container>
  ); 
}

export default Sock;

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

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

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 数据更新显示

React Hooks & UseEffect not updating display with socketIO data

javascript

socket.io

reactjs

react-hooks

use-effect