@semki096

Как обновить данные в componentDidMount, если данные идут из socket-а?

Данные планирую обновлять как-то так
componentDidMount() {
			this.setState({
				data: вот сюда надо както доставить новые данные
			});
		}

А новые данные получаю из сокета так
const ws = new WebSocket("ws://api...");
ws.onmessage = responce => console.log(responce.data);

То есть мне надо как-то взять последний message из сокета и добавить его в this.state.data и сделать это правильно Причём данные надо обновлять по событию onmessage (но это уже другой вопрос). Буду благодарен за помощь.
  • Вопрос задан
  • 204 просмотра
Решения вопроса 1
kleinmaximus
@kleinmaximus
Senior Full-stack Javascript Developer
Типа такого:

class WS extends React.Component {
  constructor(props) {
    super(props);
    this.state = { messages: [] };
    this.ws = new WebSocket("ws://api...");
  }

  componentDidMount() {
    this.ws.onmessage = responce => this.setState({ ...this.state, messages: [ ...this.state.messages, responce.data ] });
  }

  componentWillUnmount() {
    this.ws.close();
  }
}


или на хуках

import React, { useEffect, useState } from 'react';

function ws() {
  const [message, setMessages] = useState([]);

  useEffect(() => {
    const ws = new WebSocket("ws://api...");
    ws.onmessage = responce => this.setState({ ...this.state, messages: [ ...this.state.messages, responce.data ] });
    return () => ws.close();
  }, []);
}


Как можно заметить, на хуках логика не размазана по всему компоненту, а находится в одном месте.

А еще лучше обернуть все это в React Context и подписываться на него в нужных компонентах через useContext (или Consumers). Тогда и очередь сообщений модно копить со всеми нужными мета-данными (например, временем получения).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы