Блог

Главная - Вопросы по программированию - Как динамически добавлять компоненты React из websockets

Как динамически добавлять компоненты React из websockets

#javascript #django #reactjs #websocket

#javascript #django #reactjs #websocket

Вопрос:

Я работал над несколькими руководствами по интеграции Django и React и внес некоторые изменения, чтобы лучше изучить платформу. Пока что, когда страница загружается, React запрашивает Django REST api и на основе этого ввода загружает ряд компонентов City. Код выглядит следующим образом:

 class CityList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cities: [],
      newCities: []
    };
  }

  componentDidMount() {
    axios.get("http://127.0.0.1:8000/api/").then(res => {
      this.setState({
        cities: res.data
      });
      document.body.style.background = "#131C2F";
    });
  }

  render() {
    console.log(this.state.articles);
    return (
      <div className="row" id="mainRow" style={{ backgroud: "#304877" }}>
        <div className="col-lg-9 col-sm-10" style={{ backgroud: "#304877" }}>
          <ul className="mainList">
            {this.state.cities.map(city => {
              return <Cities city={city} />;
            })}
          </ul>
        </div>
        <div className="col-lg-3 col-sm-2" style={{ backgroud: "#304877" }}>
          <div className="form-signin search-box" style={{ position: "fixed" }}>
            <h1
              className="h3 mb-3 font-weight-normal"
              style={{ textAlign: "center", fontSize: "22px", color: "white" }}
            >
              Add location
            </h1>
            <br />

            <input
              type="text"
              name="location"
              id="myLocation"
              className="form-control"
              placeholder="City"
            />
            <br />
            <div
              className="btn btn-primary btn-block"
              onClick={this.handleClick}
            >
              Add
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Я попытался добавить веб-сокет, который отправлял бы новые компоненты City из серверной части Django. Сокет создается с помощью:

 var mySocket = new WebSocket('url to backend');

Это также отлично работает и получает объекты в формате, необходимом для заполнения компонентов City. Однако я не могу понять, как написать функцию, которая использует данные из websocket, создает компонент и загружает его на страницу.

Я предполагаю, что одним из способов было бы обновить состояние компонента cityList, именно поэтому я добавил ‘newCities’ в состояние, но, похоже, дальше этого дело не идет.

Любые указатели были бы очень признательны 🙂

Комментарии:

1. Пожалуйста, включите в websocket код, который не работает, чтобы кому-то было проще помочь вам с вашим вопросом. Вы могли бы добавить данные из ответа websocket в состояние вашего компонента и использовать это в методе визуализации компонента. При обновлении состояния компонент будет повторно отображаться автоматически.

Ответ №1:

Если вы просто хотите добавлять города в текущий список, когда получаете их из сокета, то, возможно, вам не нужен отдельный newCities массив в вашем штате. Просто push или concat новые города в существующий cities массив.

Например, если ваш сокет выдает newCity событие с одним городом в качестве данных, вы могли бы сделать что-то вроде этого:

 mySocket.addEventListener('newCity', (event) => {
  this.setState(prevState => ({ cities: prevState.cities.push(event.data) }));
});