如何在數組中使用 Map 對象 - Javascript

Question

這是針對 React Native Chat 應用程序的。

我的數據應該是這樣的：

const data = [
 {
   id: 1,
   name: John Doe,
   messages: [
     {text: 'Hello', sentAt: 'time here'},
     {text: 'How are you?', sentAt: 'time here'},
     {text: 'Can we meet?', sentAt: 'time here'}
   ]
   image: { uri: "https://randomuser.me/api/portraits/med/men/97.jpg" },
 },
 {
   id: 1,
   name: Robert Smith,
   messages: [
     {text: 'Hi', sentAt: 'time here'},
     {text: 'Can I call now?', sentAt: 'time here'},
   ]
   image: { uri: "https://randomuser.me/api/portraits/med/men/97.jpg" },
 },
 {
   id: 1,
   name: Roy Pinkham,
   messages: [
     {text: 'Please give me a call', sentAt: 'time here'},
   ]
   image: { uri: "https://randomuser.me/api/portraits/med/men/97.jpg" },
 }
]

我正在使用 FlatList 列出聊天列表：

<FlatList
        data={data}
        keyExtractor={(message) => message.id.toString()}
        renderItem={({ item }) => (
          <MessageItem
            name={item.name}
            message={item.messages.map((message) => message.text)}
            image={item.image}
            read={item.read} // Hard-coded value in data array
            time={item.time} // hard-coded value in data array
            renderRightActions={() => (
              <MessageDelete onPress={() => deleteMessage(item)} />
            )}
            onPress={() => navigation.navigate("Chats", item)}
          />
        )}
        ListHeaderComponent={
          showSearch && <Search query="" onSearchChange={onSearchChange} />
        }
      />

像這樣的消息顯示全部堆積起來，我不是解決方法。 我想要實現的是根據時間戳顯示最后一條消息。

Answer 1

由於您只需要最新消息，因此您可以將值直接傳遞到最新發送的消息中，而不是映射所有消息。

<...
messages={message={() => this.getLatestMessage(item.messages)}
... />

getLatestMessage()應該是這樣的

getLatestMessage = (messages) => {
    message = ...filter latest message logic here

    return message.text;
}

Answer 2

要獲取消息數組的最后一條消息，請將MessageItem元素的 message 屬性設置為最后一條消息，如下所示：

message={item.messages[item.messages.length - 1].text}