使用 React 按最近的消息对聊天中的用户进行排序

Question

我需要根据用户发送的新消息 在我的 ReactJS 聊天应用程序 中对用户数组 进行排序， 更新每条新消息，例如 whatsApp 或电报。

下面是两个不同数组的简化界面：用户和消息：

我正在使用 momentjs 处理日期，存储的日期格式是这样的时间戳： 2021-03-26 00:17:50

interface userProps { id: string; chat_id: string; first_name: string; last_name: string; } interface messagesProps { id?: string; chat_id?: string; content?: string; send_by?: string; visualized?: boolean; created_at?: string; }

所有消息都存储在数组中并通过chatID过滤，两个数组有共同点。

有谁知道这个挑战的最佳解决方案是什么？

Answer 1

我不太确定你的聊天室是如何参与的，但你可以使用像这样的简单 JS 代码让用户按 id 排序：

const sortedUserIds = messages  // you array of messagesProps
  .sort() // you already know the correct way to sort your messages
  .map(m => m.send_by)
  .filter(m => m.send_by !== null)

const sortedUsers = [...new Set(sortedUserIds)].map(id => users.find(u => u.id === id))

既然你已经参与了react，你可以基于messages array with react hooks来触发上面的代码：

const [users, setUsers] = useState([]);    

useEffect(() => {
  run the code above to get sorted users
  setUsers(your sorted users);
}, [messages])
  
return (
  <ul>
    {users.map(u => <li>{u.first_name}</li>)}
  </ul>
)

使用 React 按最近的消息对聊天中的用户进行排序

Sort Users in chat by most recent messages with React

javascript

chat

typescript

reactjs

react-hooks