如何打印多条消息但只有一个聊天应用程序的用户名

Question

我想创建一个看起来与使用 iphone 进行消息传递完全相同的消息应用程序。 我的意思是我希望每次新人写东西时都显示用户名，但如果这个人继续写，用户名不会重复，它只会创建一个新的消息气泡（就像使用苹果手机等）。 我曾尝试使用 map 来实现这一点，但它不起作用。 有谁知道我怎么写这个？

到目前为止，这是我的代码。 有谁知道我应该怎么写？

import React, { useState, useEffect } from 'react'
import axios from 'axios'


export const GetMessages = () => {
  const [userMessage, setUserMessage] = useState([]);

  const user = window.localStorage.getItem('Name')

  const fetchResponse = async () => {
    try {
      const getResponse = await axios.get(
      'http://167.172.108.61/?storage=camilla_lofroth'
    )
    console.log(getResponse.data)
    setUserMessage(getResponse.data)
    } catch (error) {
      alert('Error')
    }
    return[]
  }  
  
  useEffect(() => {
    fetchResponse()
  }, [])
  
  console.log(userMessage)

  return (
    <div>
      <div>
        <p>{user}</p>
      </div>
        {userMessage.map(message => (
        <p>
          {message.user !== null && typeof message.user === 'object'? message.user.mess: message.user }
          {userMessage.map(message => (
          <p>
          {message.message !== null && typeof message.message === 'object'? message.message.mess: message.message}
          </p>   
        ))}
        </p>
        ))}
    </div>
  )
  }

Answer 1

实际上我不久前做了类似的事情（相同用户消息的间隔更小）： http://astral-chat-app.herokuapp.com/

编辑：根据您的 state，要为每组消息呈现一次用户名，您的回报应该是：

return (
    <div>
      {userMessage.map((message, index) => {
        return(
          <div key={Math.random() * 1000000000}>
            {index > 0 && message.user !== userMessage[index-1].user 
              && <h3>{message.user ? message.user : "Unknown"}</h3>
            }
            <p> {message.message} </p>
          </div>
        )
      })}
    </div>
  )