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

时间:2019-12-17 14:36:18

标签: javascript reactjs socket.io react-hooks

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 个答案:

答案 0 :(得分:3)

image of code ,但是对于您的简单情况,您可以使用few ways to take care of stale closure语法获取以前的文本数据,并返回数组的新实例(不要使用{{ 1}})。

>>> expr += x*w + x*w**2 + y + y*w**2
>>> terms = set(e.as_coeff_Mul()[1] for c in expr.as_poly(w).all_coeffs() for e in Add.make_args(c))
>>> new_expr = sum(t * expr.coeff(t) for t in terms)
>>> new_expr.equals(expr)
False

使用回调方法,您无需将push放入 useEffect(() => { const socket = socketIO("http://127.0.0.1:5009"); socket.on("chat message", text => { setTextData(previousTextData => [...previousTextData, text]); }); }, []); 的依赖项数组中。

答案 1 :(得分:1)

您必须将 data (文本)与现有的 data (textData)连接,尝试:

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