如何以类似聊天的方式显示消息

Question

我从一个API调用中获得了一系列聊天消息，并将其映射到一个组件（如下面的代码所示）。在该组件中，我根据条件集渲染了消息。但是.map方法只是将以前的消息替换为新的消息。我想.concat（）这些消息并像在聊天中一样一一显示。

ChatBox组件：

this.state = {
messages: [] }

getNewMessages() {
//api called & got response
this.setState({
messages: parsedResponse });
}

render() {
  return(<>
{messages.map(messages => (
<NewMessages data={messages} />))}</>)
}

NewMessages组件：-

`this.state = { message: this.props.data.message }`

`return(<p>{message}</p>)`

如何合并此数组，以便我可以获得所有消息，而不仅仅是最后一条。

Answer 1

render() {
    return messages.forEach(m => `<div>${m}</div>`);
}

Answer 2

扩展运算符可以帮助您。

getNewMessages() {
    //api called & got response
    this.setState({
        messages: [...this.state.messages, ...parsedResponse]
    });
}

并且仅渲染消息本身。

render() {
    return(
        <>
              {this.state.messages.map(messages => (<p>{message}</p>))}
        </>
    )
}