Question

我一直在研究一些有关集成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>
    );
  }
}

我尝试添加一个Web套接字，该套接字将从Django后端推送新的City组件。套接字是通过以下方式创建的：

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

这也可以正常工作，并以填充City组件所需的格式接收对象。但是，我不知道如何编写一个函数，该函数使用来自websocket的数据，制作组件并将其加载到页面。

我认为其中一种方法是更新CityList组件的状态，这就是为什么我在该状态中添加了“ newCities”，但似乎不能超出此范围。

任何指针将不胜感激：）

Answer 1

如果您只想在从套接字接收城市时将其添加到当前列表中，则可能不需要在您的州使用单独的newCities数组。只需将新城市push或concat移至现有cities阵列上即可。

例如，如果您的套接字发出一个以单个城市作为数据的newCity事件，则您可以执行以下操作：

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

如何从WebSocket动态添加React组件

1 个答案: