Нативный плоский список React — различие между отправленным и полученным сообщением
В настоящее время я пытаюсь реализовать свой экран чата, где я пытаюсь различать полученные сообщения и отправленные сообщения.
Я создал компонент под названием MessageBubble, который принимает свойство, называемое моим, если сообщение отправляется текущим пользователем.
С приведенной ниже реализацией, когда я открываю чат на двух разных устройствах, у них обоих есть сообщение справа (отправленное текущим пользователем), где у одного из них оно должно быть слева.
вот мой плоский код:
<FlatList
inverted
data = {message.Messages}
keyExtractor = {(message) => message.id.toString()}
renderItem = {({item,index})=>(
message.Messages.map(x=>x.senderId) === user.id?
<MessageBubble mine text= {item.message} />:<MessageBubble text = {item.message} />
)}
/>
``
user.id ----> is the id of the current user
When i console.info(message.Messages.map(x=>x.senderId)), i get an array with all the senderIds
```react
Array [
43,
43,
43,
43,
]
Когда я console.info(message.Messages), я получаю следующее:
Array [
Object {
"conversationId": 15,
"createdAt": "2020-12-14T11:38:41.471Z",
"id": 54,
"message": "Hey user1",
"receiverId": 47,
"senderId": 43,
"updatedAt": "2020-12-14T11:38:41.471Z",
},
Object {
"conversationId": 15,
"createdAt": "2020-12-14T10:28:54.685Z",
"id": 52,
"message": "Test12345",
"receiverId": 47,
"senderId": 43,
"updatedAt": "2020-12-14T10:28:54.685Z",
},
]
Ответы 2
Попробуйте так
renderItem = {({item,index})=>(
<MessageBubble
text = {item.message}
mine = {item.senderId === user.id} // this way
/>
)}
Нет, извините, я понятия не имею
Привет, извините, что беспокою вас снова, вы успели взглянуть на мой вопрос?
Я пробовал stackoverflow.com/questions/65325432/…
Вы неправильно закрыли скобку. message.Messages.map(x=>x.senderId) === user.id? это означает, что вы перебрали массив сообщений, карта вернула новый массив, и вы проверили, равен ли этот новый массив user.id или нет, что всегда ложно.
ооо, вот почему clg(message.Messages.map(x=>x.senderId)) продолжает возвращать новый массив только с senderId. Я использовал решение @Nooruddin выше, и оно сработало. Вы согласны, что это правильный подход?
Быстрый вопрос, вы использовали socket.io раньше?
Как видите, ответ Нооруддина правильный. Я лишь указал на твою ошибку :))
@ kd12345 Нет, я не знаком.
Хорошо, спасибо, ценю это :), так карта всегда возвращает новый массив правильно?
Да. Вы можете проверить это самостоятельно. const newArray = [1, 2, 3].map(num => num); В этом случае newArray будет массивом [1, 2, 3].
Привет, Нооруддин, спасибо. Я хотел спросить, вы знакомы с socket.io?