React Hooks & UseEffect 不使用 socketIO 数据更新显示。只渲染数组中的元素

IT技术 javascript reactjs socket.io react-hooks
2021-05-07 13:15:46 
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 钩子相当陌生，任何帮助或建议将不胜感激。

2个回答

有照顾陈旧封闭的几种方法，但你简单的情况下，可以使用的功能更新语法来获得以前的文本数据，并返回数组（不发生变异存在状态，使用的新实例push）。

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

使用回调方法，你不需要投入textData中useEffect的相关性排列。

您必须将您的数据（文本）与现有数据（文本数据）连接起来，尝试使用：

setTextData([...textData, text]);
其它你可能感兴趣的问题
上一篇React Webpack“意外令牌”命名的箭头函数 下一篇即使在深度复制所有状态数据后，React redux 状态更改也不会导致更新