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

Question

Я работал над парой руководств по интеграции Django и React и внесу некоторые изменения, чтобы лучше изучить платформу.До сих пор, когда страница загружается, React запрашивает API-интерфейс REST Django и, основываясь на этом входе, загружает несколько компонентов 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');

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

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

Любые указатели будут очень благодарны:)

Answer 1

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

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

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