在Next js中使用swr进行更新

问题描述

我正在尝试制作一个具有active属性的组件，并且该组件应该是可切换的，因此用户可以根据需要多次切换为active或inactive。由于我正在使用Next js，因此我决定使用SWR在客户端渲染某些页面。这是我第一次使用它，而且我尝试实现该功能已经有好几天了，但我无法完成它。

每个组件都通过位于父组件中的map方法接收handletoggleActive函数

这是功能

async function handletoggleActive(brtId: number) {
    const selectedBrt = data.response.find((brt) => brt.id === brtId);

    setBeingEdited(selectedBrt);

    setBeingEdited((prevstate) => {
      return {
        ...prevstate,active: !prevstate.active,};
    });

    try {
      const body = {
        active: beingEdited.active,brtId,};

      const res = await fetch("/api/brainstorm/update",{
        method: "PUT",body: JSON.stringify(body),});

      if (res.ok) {
        mutate("/api/brainstorm/user-brainstorms");
      } else {
        alert("An error ocurred");
      }
    } catch (err) {
      alert(err.message);
    }
  }

这是我的编辑：我注意到函数中的某些内容。就像我说过的，每次我运行该函数时，当前正在编辑的项目都将插入到beingEdited状态中，当请求结束时，我再次将状态设置为null。更新会发生，但是只有在我按下开关两次时才会发生，因为它将状态设置为null，然后为下一个请求填充数据。有没有一种方法可以一键切换？

解决方法

在此处发布更改，因为比在评论中更容易。

而不是像这样两次致电setBeingEdited(...)

我会改变这个...

const selectedBrt = data.response.find((brt) => brt.id === brtId);

    setBeingEdited(selectedBrt);

    setBeingEdited((prevState) => {
      return {
        ...prevState,active: !prevState.active,};
    });

对此...

const selectedBrt = data.response.find((brt) => brt.id === brtId);

     setBeingEdited({...selectedBrt,active: !prevState.active});