如何打印多條消息但只有一個聊天應用程序的用戶名

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