如何动态附加react div？

Question

每次从服务器端套接字接收到一个对象时，都必须在DOM中附加一个新的div元素，其中包含一条消息。

而是再次重新覆盖div元素，并且仅生成一个div元素。

  state = {
    chatMessage: ''
  }

  componentDidMount() {
    socket.on('retrieve-chat-left', (data) => {

      var message = data.map(data => {
        console.log(data.name, data.message);
        return <ChatListLeft key={data._id} name={data.name} chatMessage={data.message} />
      });

      this.setState({
        chatMessage: message
      });
    });

  }

  render() {

    return (
      <div className="mainbodybar">
        {this.state.chatMessage}
      </div>
    )
  }

// ChatListLeft component

import React from 'react'

export default function ChatListLeft({ chatMessage, name }) {
  return (
    <div className="retrieve-chat-left">
      {chatMessage}
      {name}
    </div>
  )
}

Answer 1

您正在覆盖邮件，而不是附加到邮件。此外，与其保存一个状态组件，不如保存数据然后渲染它：

  state = {
    chatMessage: [] // chatMessage should be an array
  }

  componentDidMount() {
    socket.on('retrieve-chat-left', (data) => {

      var message = data.map(data => {
        return {id: data._id, message: data.message, name: data.name}
      });

      this.setState(state => ({
        chatMessage: [...state.chatMessage, message] // Append the messages to the state here
      }));
    });

  }

  render() {
    const messages = this.state.chatMessage.map(msg=> <ChatListLeft key={msg._id} name={mag.name} chatMessage={mag.message} />
    return (
      <div className="mainbodybar">
        {messages}
      </div>
    )
  }