如何使用 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 与网络套接字一起使用，这是一个 anti-pattern。 SWR 用于管理通过 REST 或 GraphQL 请求获取的数据，并且可以将其配置为定期重新获取数据。这不是实时连接。另一方面，Websocket 是实时的。考虑 SWR 是否真的最适合您的项目——您可能不需要它。

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

您必须将 ID 传递给第一个参数
如果将函数传递给 mutate 的第二个参数，它必须 return 新数据
更新数组中特定项的一种简单方法是使用 .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
  );
}

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

How to mutate specific object in an array using SWR

reactjs

next.js

swr