我的对象数组更新了最后一个元素,加入了新的对象。

huangapple go评论67阅读模式
英文:

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:

first message:
我的对象数组更新了最后一个元素,加入了新的对象。

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

huangapple
  • 本文由 发表于 2023年3月7日 23:38:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/75664069.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定