时间戳

首页 > 解决方案 > 无法识别通过 ReactJS 发送函数中的道具传递 websocket

javascript - 无法识别通过 ReactJS 发送函数中的道具传递 websocket

问题描述

我一直在尝试通过道具将 websocket 传递给孩子，离开本教程： https ://dev.to/finallynero/using-websockets-in-react-4fkp

像这样从父级传递 websocket

render() {
    return <MIDIComponent websocket={this.state.ws} />;
  }

然后像这样获取和使用它

const websocket = this.props;

function getMIDIMessage(msg) {
      websocket.send(
        JSON.stringify({ message: Array.from(msg.data), type: "config" })
      );

这一切都包含在一个带有一堆其他东西的函数中，然后从内部调用componentDidMount()

当我这样做时，我得到了错误

Uncaught TypeError: websocket.send is not a function

这样做会导致 websocket 未定义

const {websocket} = this.props;

编辑：

websocket 是这样创建的：

var ws = new WebSocket("ws://localhost:8000/ws/assistant/user/");

服务器肯定是连接的，将此行直接复制到我的子组件中并直接在其中打开 websocket 使其工作并允许我将数据发送到服务器，这让我想知道我是否应该这样做。但是我将在整个应用程序中使用 websocket 几次，所以只初始化一次并将它传递到任何需要去的地方感觉是正确的。

谁能告诉我发生了什么事？

标签： javascriptreactjswebsocket

解决方案

好的，所以我解决了这个问题。

部分原因是我自己的愚蠢 - 首先我将 websocket 组件创建为 WebSocket，这显然与 WebSocket() 函数发生冲突。

然后，当在孩子内部设置 componentDidMount() 中的所有内容时，我忽略了将“this”传递给我在那里调用的函数，因此无法访问 this.props。它现在正在工作。

componentDidMount() {
    const that = this;
    this.setupMIDI(that);
  }

推荐阅读