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

每当我发送一条消息时，都会调用update函数，并且该函数会按需运行。（下面的示例）

我不确定我还能提供什么，但是下面是“ globalMsgs”的示例：data in globalMsgs/privateMsgs variables example

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

动态更新列表/列表项

1 个答案: