如何使用 SWR 改变数组中的特定对象

Question

我有以下数组

[
{
"idChatPublic": 17,
"idChatRoom": 2,
"idSender": "6c25110d-4256-42e1-8205-b75ece274487",
"username": "Hudson Thadeu Teixeira",
"message": "hello",
"avatar": null,
"createdAt": "12:43",
"chatLike": []
},
{
"idChatPublic": 33,
"idChatRoom": 2,
"idSender": "6c25110d-4256-42e1-8205-b75ece274487",
"username": "Hudson Thadeu Teixeira",
"message": "jam",
"avatar": null,
"createdAt": "13:07",
"chatLike": [
  {
    "idChatLike": 1,
    "idChatPublic": 33,
    "idUser": "",
    "createdAt": "2022-02-14T08:59:34.000Z"
  }
 ]
}
]

如何改变这个数组的特定对象并添加一个对象 使用 SWR 到“chatLike”数组？

我有以下功能：

async function sendLike() {
const newLike = {
  idUser: myUser.userId,
}

mutate(
  async (data) => {
    console.log(data[messageIndex]) // This log returns specific object in the array

    // Handle mutation

  },
  false
)
socket.emit('send_like', newLike)
}

如果有人帮我一把，我已经尝试了一段时间会很棒：D

Answer 1

您将 SWR 与 websocket 一起使用，这是一种反模式。 SWR 旨在管理通过 REST 或 GraphQL 请求获取的数据，并且可以将其配置为定期重新获取数据。这不是实时连接。另一方面，Websocket 是实时的。考虑一下 SWR 是否真的最适合您的项目 - 您可能不需要它。

无论如何，我也注意到您的mutate() 的书写方式存在一些问题，所以这里有一些反馈。

• 您必须将 ID 传递给第一个参数
• 如果将函数传递给mutate 的第二个参数，它必须返回新数据
• 更新数组中特定项的简单方法是使用.map() 并传播... 语法

function sendLike() {
  const newLike = {
    idUser: myUser.userId,
  }

  // send request to update the source
  // this is usually an REST request such as 'POST, UPDATE' etc
  socket.emit('send_like', newLike)

  // mutate local data
  mutate(
    '/api/chat', // ID must match ID used in the useSWR hook,
    data => data.map(chat => chat.idChatPublic === idChat : {
      ...chat,
      chatLike: [
        ...chat.chatLike
        newLike
      ]
    } : chat),
    false
  );
}