时间戳

首页 > 解决方案 > React：渲染传入 Websocket 消息的数组

reactjs - React：渲染传入 Websocket 消息的数组

问题描述

我已经打开了一个 websocket 来接收传入的消息。我想在消息到达时（或尽快）呈现消息。我想将每条新消息推送到数组的前面，并在每条新消息上重新呈现该数组。

这是将返回要呈现的数组的自定义 Hook 组件：

export default function usePendingTransactions() {
  const [pendingData, setPendingData] = useState([])

  useEffect(() => {
    const WebSocket = require('isomorphic-ws');
    const ws = new WebSocket("wss://mainnet.infura.io/ws/v3/APIKEY");
    ws.onopen = function open() {
      ws.send('{"jsonrpc":"2.0","method":"eth_subscribe","params":["newPendingTransactions"],"id":1}')
    };
    ws.onmessage = function incoming(data) {
      var response = JSON.parse(data.data)
      setPendingData(pendingData => [response.result, ...pendingData])
    }
  }, []);
  return pendingData

如所写，接收到的第一条消息被正确呈现。然后使用 setPendingData 挂钩仅将未定义的对象推送到数组中。谁能看到为什么我的响应变量在第一条消息后未定义？

标签： reactjswebsocketreact-hooks

解决方案

推荐阅读