動態更新列表/列表項

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});
  }

每當我發送消息並按需要工作時，都會調用更新 function。 （下面的例子）

我不確定我還能提供什么，但這里有一個“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});
      }
   }
}