Динамически обновлять список / элементы списка

Question

(Небольшое редактирование: "ce" является ярлыком для "React.createElement")

Я работал над проектом React / WebSockets / AJAX для чата / доски объявлений. Я довольно новичок в React, и я понял большинство из них, но у меня возникают проблемы с динамическим обновлением списка / обновлением его элементов.

Что я хочу делать, это каждый раз, когда мой WebSocket получает " обновить ", я хочу обновить списки с последними сообщениями. У меня проблема в том, что они ничего не отображают, хотя мой метод обновления вызывается правильно. Я не получаю ошибок.

В моем UserPageComponent у меня есть:

constructor(props) {
    super(props);

    this.state = {
      channelType: "global",
      messageToSend: "",
      target: "",
      globalMessages: [],
      privateMessages: []
    };
}

В моем рендере UserPageComponent у меня есть это:

... return 'Global Chat: ',
      ce('ul', {id: "globalMessageDiv"}, this.state.globalMessages),
      'Private Chat: ',
      ce('ul', {id: "privateMessageDiv"}, this.state.privateMessages),
...

Вот мое обновление ( вызывается каждый раз при отправке нового сообщения - имейте в виду, что globalMsgs / privateMsgs правильно заполняется ВСЕМИ сообщениями, отправленными с момента его вызова).

updateData() {
    const globalMsgs = this.getMessages("global");
    const privateMsgs = this.getMessages("private");

    var compiledGms = [];
    var compiledPms = [];

    globalMsgs.map((gm) => {
      var gmToLi = ce('li', gm);
      compiledGms.push(gmToLi);
    });

    privateMsgs.map((pm) => {
      var pmToLi = ce('li', pm);
      compiledPms.push(pmToLi);
    });

    this.setState({globalMessages: compiledGms});
    this.setState({privateMessages: compiledPms});
  }

Функция обновления вызывается всякий раз, когда я отправляю сообщение и работает как надо. (пример ниже)

Я не уверен, что еще я могу предоставить, однако вот пример того, что содержит "globalMsgs": данные в переменных переменных globalMsgs / privateMsgs

Answer 1

Попробуйте этот код ниже

updateData() {
   const globalMsgs = this.getMessages("global");
   const privateMsgs = this.getMessages("private");

   var compiledGms = [];
   var compiledPms = [];

   for(var i=0;i<globalMsgs.length;i++){
      var gmToLi = ce('li', globalMsgs[i]);
      compiledGms.push(gmToLi);
      if(i==globalMsgs.length-1){
         this.setState({globalMessages: compiledGms});
      }
   }

   for(var i=0;i<privateMsgs.length;i++){
      var pmToLi = ce('li', privateMsgs[i]);
      compiledPms.push(pmToLi);
      if(i==privateMsgs.length-1){
         this.setState({privateMessages: compiledPms});
      }
   }
}