英文:
My array of objects updates the last element with the new object added
问题
我创建了一个具有聊天功能的Web应用程序,使用Laravel + Vue。每当我发送一条消息时,我使用unshift()方法将消息添加到一个数组中,以使其显示类似于Messenger应用程序。但是,它会更新我的对象数组中的最后一个元素。我还使用pinia store。为了更好地理解问题,以下是示例代码。
在我的storeChats.js文件中(这是我的Pinia存储文件用于聊天):
import axios from "axios";
import { ref } from "vue";
import { defineStore } from "pinia";
export const useChatStore = defineStore('Chat', () => {
const conversation = ref(new Array())
return { conversation }
})
然后在我的聊天组件中,我有以下代码:
// 模板中的一些代码
// 导入部分代码
import { useChatStore } from '../../Store/storeChatNotif';
const storeChat = useChatStore();
const message = mess => {
if (mess == '' || !mess) ''
else
if (mess.trim() != ''){
axios.post('/chat/send', {
user: storeChat.selectedUserChat.id,
message: mess
}).then(res => {
let data = res.data
if(storeChat.conversation.length == 0)
storeChat.conversation.push(res.data)
else{
storeChat.conversation.unshift({...res.data})
}
}).catch(e => {
// 处理错误的一些代码
})
}
}
我的message()
方法用于发送消息。
每当用户点击输入键或发送按钮时,message()
方法都会被触发。
现在,当消息发送到服务器并存储到我的数据库后,服务器会返回以下格式的消息:
{
avatar: null,
convoId: 53, // 对话 ID
created_at: "2023-03-07T13:11:16.000000Z",
id: 3,
message: "hi",
name: "Anna Doe",
receiver: 3, // 接收消息的用户的 ID
seen: null,
sender: 1, // 发送消息的用户的 ID
updated_at: "2023-03-07T13:11:16.000000Z"
}
现在,这个对象会被添加到storeChat.conversation
中,如您在上面的聊天组件代码中所看到的。
问题在于,每当发送新消息时,它会更新对象数组中的最后一个元素,也就是storeChat.conversation
。所以,不是得到以下结果:
[
{
avatar: null,
convoId: 53, // 对话 ID
created_at: "2023-03-07T13:15:50.000000Z",
id: 3,
message: "hello",
name: "Anna Doe",
receiver: 1, // 接收消息的用户的 ID
seen: null,
sender: 3, // 发送消息的用户的 ID
updated_at: "2023-03-07T13:15:50.000000Z"
},
{
avatar: null,
convoId: 53, // 对话 ID
created_at: "2023-03-07T13:11:16.000000Z",
id: 3,
message: "hi",
name: "Anna Doe",
receiver: 3, // 接收消息的用户的 ID
seen: null,
sender: 1, // 发送消息的用户的 ID
updated_at: "2023-03-07T13:11:16.000000Z"
}
]
而是得到以下结果:
[
{
avatar: null,
convoId: 53, // 对话 ID
created_at: "2023-03-07T13:15:50.000000Z",
id: 3,
message: "hello",
name: "Anna Doe",
receiver: 1, // 接收消息的用户的 ID
seen: null,
sender: 3, // 发送消息的用户的 ID
updated_at: "2023-03-07T13:15:50.000000Z"
},
{
avatar: null,
convoId: 53, // 对话 ID
created_at: "2023-03-07T13:15:50.000000Z",
id: 3,
message: "hello",
name: "Anna Doe",
receiver: 3, // 接收消息的用户的 ID
seen: null,
sender: 3, // 发送消息的用户的 ID
updated_at: "2023-03-07T13:11:16.000000Z"
}
]
为了更好理解,下面显示了一些图片:
正如您所看到的,第一条消息被更新为新发送的消息。
有人能告诉我为什么吗?
英文:
I created a web application that has chat feature, using Laravel + Vue. whenever i send a message i added the message to an array using unshift() method to display it like that of messenger app. However, it updates the last element in my array of object. I also use pinia store. To better understand the problem a code is shown below.
In my storeChats.js (this is my Pinia store file for chats)
import axios from "axios";
import { ref } from "vue";
import { defineStore } from "pinia"
export const useChatStore = defineStore('Chat', () => {
const conversation = ref(new Array())
return {conversation}
})
then in my chat component i have this code
//some code for template
//some code for imports
import { useChatStore } from '../../Store/storeChatNotif'
const storeChat = useChatStore();
const message = mess => {
if(mess == '' || !mess) ''
else
if(mess.trim() != ''){
axios.post('/chat/send', {
user: storeChat.selectedUserChat.id,
message: mess
}).then(res => {
let data = res.data
if(storeChat.conversation.length == 0)
storeChat.conversation.push(res.data)
else{
storeChat.conversation.unshift({...res.data})
}
}).catch(e => {
//some code here for error
})
}
}
my message()
is the method that sends the message.
each time the use clicks enter or send button the message()
is triggered
now after the message is send to the server and store it to my database, it responds with the the created message, it returns like this:
{
avatar: null,
convoId: 53, //their conversation id
created_at: "2023-03-07T13:11:16.000000Z",
id: 3,
message: "hi",
name: "Anna Doe",
receiver: 3, // id of the user who will receive the message
seen: null,
sender: 1, //id of the user who sends the message
updated_at:"2023-03-07T13:11:16.000000Z"
}
now this object is then added to storeChat.conversation as you can see from the code above in my chat component.
the problem is this, whenever is send a new message it updates the last element in my array of objects which is the storeChat.conversation. So instead of getting a result like this:
[
{
avatar: null,
convoId: 53, //their conversation id
created_at: "2023-03-07T13:15:50.000000Z",
id: 3,
message:"hello",
name: "Anna Doe",
receiver: 1, // id of the user who will receive the message
seen: null,
sender: 3, //id of the user who sends the message
updated_at: "2023-03-07T13:15:50.000000Z"
},
{
avatar: null,
convoId: 53, //their conversation id
created_at: "2023-03-07T13:11:16.000000Z",
id: 3,
message: "hi",
name: "Anna Doe",
receiver: 3, // id of the user who will receive the message
seen: null,
sender: 1, //id of the user who sends the message
updated_at:"2023-03-07T13:11:16.000000Z"
}
]
i get this:
[
{
avatar: null,
convoId: 53, //their conversation id
created_at: "2023-03-07T13:15:50.000000Z",
id: 3,
message:"hello",
name: "Anna Doe",
receiver: 1, // id of the user who will receive the message
seen: null,
sender: 3, //id of the user who sends the message
updated_at: "2023-03-07T13:15:50.000000Z"
},
{
avatar: null,
convoId: 53, //their conversation id
created_at: "2023-03-07T13:15:50.000000Z",
id: 3,
message: "hello",
name: "Anna Doe",
receiver: 3, // id of the user who will receive the message
seen: null,
sender: 3, //id of the user who sends the message
updated_at:"2023-03-07T13:11:16.000000Z"
}
]
to understand more the image is shown below:
then after sending another message:
after sending another message:
as you can see the first message being send is updated with the new sent message.
can someone tell me why?
答案1
得分: 0
这段代码似乎存在以下几行:
if(storeChat.conversation.length == 0)
storeChat.conversation.push(res.data)
else{
storeChat.conversation.unshift({...res.data})
}
我注意到你在unshift
方法中创建了一个新对象,但在push
方法中没有这样做。
尽管我不太明白为什么res.data
会被重复使用,但根据结果来看,似乎表明res.data
是一个实例,正在被更新而不是替换。如果是这种情况,应该这样修复:
storeChat.conversation.push({...res.data})
英文:
It seems like that might be due to these few lines
if(storeChat.conversation.length == 0)
storeChat.conversation.push(res.data)
else{
storeChat.conversation.unshift({...res.data})
}
I see that you are creating a new object in unshift
but not on push
Although it is not making sense to me why res.data
would be getting reused, based on the results it seems to indicate that res.data
is an instance that is getting updated instead or replaced. If that is the case this should fix it
storeChat.conversation.push({...res.data})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论