Проблема с Websocket .send () в Reactjs

Question

Я новичок, чтобы реагировать, так что извините, если решение очевидно. Для моего проекта мне нужно подключиться к веб-сокету внутри компонента со следующим кодом

let id = 2;

const Dashboard = () => {
  const [apiOutput, setApiOutput] = useState([]);
  const [apiConnectionStatus, setApiConnectionStatus] = useState(false);

  const ws = new WebSocket("ws://XXXXXXX/api/websocket");
  const initWebsocket = () => {
    ws.addEventListener("open", () => {
      ws.send('{"type":"auth", "api_password":"XXXX"}');
      ws.send('{"id": 1, "type": "get_states"}');
      ws.send(
        '{"id": 2, "type": "subscribe_events", "event_type": "state_changed"}'
      );
    });

    ws.onopen = () => {
      setApiConnectionStatus(true);
    };

    ws.onmessage = evt => {
      const message = JSON.parse(evt.data);
      setApiOutput(message);
    };

    ws.onclose = error => {
      console.log(error);
      setApiConnectionStatus(false);
    };
  };

  useEffect(() => {
    initWebsocket();
  }, []);

  const switchHandler = entity_id => {
    console.log("switch =" + ws.readyState);
    id++;
    const command = `{"id": ${id}, "type": "call_service", "domain": "switch", "service": "toggle", "service_data": { "entity_id": "${entity_id}"}}`;
    ws.send(command);
  };

Функция SwitchHandler отправляется дочернему компоненту через реквизиты и триггеры, как и ожидалось. Состояние apiOutput работает так же, как и ожидалось.

Проблема в том, что ws.send(command) не работает (как не запуск), даже если ws.readyState возвращает 1 внутри функции SwitchHandler.

Есть ли что-то очевидное, что я скучаю?

Answer 1

ОК нашел ответ.

Просто нужно было объявить let ws; перед функцией Dashboard.

let ws;
let id = 2;

const Dashboard = () => {
  const [apiOutput, setApiOutput] = useState([]);
  const [apiConnectionStatus, setApiConnectionStatus] = useState(false);

  ws = new WebSocket("ws://XXXXXXX/api/websocket");

...