Reactjs не может установить соединение с сокетом, он открывается и получает ответ при вызове componentDidMount

Question

Мне не удается открыть соединение через веб-сокет в React.js.Соединение устанавливается при вызове той же функции в componentDidMount.Когда я начинаю звонить, используя любое событие, например onClick или onSubmit, я не могу открыть соединение и получить ответ от сервера.

Код ниже.

var exampleSocket = new WebSocket('wss://api.somedomain.io/WSGateway');

class MyClass extends Component {
  componentDidMount() {
    this.authenticate();
  }
  authenticate() {
    exampleSocket.onopen = function (event) {
      var payload = {
        "UserName": "username",
        "Password": "password"
      };
      var msg = {
        "m": 0,
        "i": 0,
        "n": "AuthenticateUser",
        "o": JSON.stringify(payload)
      };
      exampleSocket.send(JSON.stringify(msg));
    }
    exampleSocket.onmessage = function apiAuthenticateUser(event) {
      try {
        let data = JSON.parse(event.data);
        let o_data = JSON.parse(data["o"]);
        console.log(o_data);
      } catch (err) {
        console.log(err);
      }
    }
  }
render() {
  const { classes, theme } = this.props;
  return (
    <React.Fragment>
      <button
        name="authentication"
        id="testid1"
        onClick={(e) => {
          this.authenticate(e);
        }}
      >
        Login
        </button>
    </React.Fragment>
  )
}
}
export default MyClass;

Answer 1

Боюсь, ваш authenticate метод не привязан к области действия компонента. Используйте bind в конструкторе или просто используйте функцию стрелки в объявлении:

class MyClass extends Component {
  componentDidMount() {
    this.authenticate();
  }

  authenticate = () => {
    exampl...

В onClick просто используйте в этом формате:

     <button
       ...
       onClick={this.authenticate}
     >