在ReactJS中处理更新

我正在制作一个应用程序，用户有能力决定他的创作是活动的还是非活动的，而负责这一点的API路由是

（我正在使用NextJSAPI路由）

包含此操作的组件作为道具从父组件中的映射方法接收其数据

我会把整个组件放在这里，但你们可以担心指示活动性的开关和负责更改的功能

import React, { useState, useEffect } from "react";
import Switch from "react-switch";
import {
  Container,
  BrainstormInfo,
  BrainstormTitle,
  Active,
  Group,
  StormPieces,
} from "./styles";
import { Brainstorm } from "../../pages/user-dashboard";
import useFormatDate from "../../hooks/useFormatDate";
import produce from "immer";

interface Props {
  brainstormData: Brainstorm;
}

const UserBrainstormCard: React.FC<Props> = ({ brainstormData }) => {
  if (!brainstormData) return <h1>Loading...</h1>;

  const [active, setActive] = useState(brainstormData.active);

  const formatedDate = useFormatDate(
    (brainstormData.createdAt as unknown) as string
  );

  async function handleActiveness() {
    setActive(!active);

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

    const data = await response.json();

    setActive(data.response.active);
  }

  return (
    <Container>
      <BrainstormInfo>
        <p>Brainstorm</p>
        <p>{formatedDate}</p>
      </BrainstormInfo>
      <BrainstormTitle>
        <h3>{brainstormData.title}</h3>
      </BrainstormTitle>
      <Active>
        <Group>
          <p>Active:</p>
          <Switch
            offHandleColor="#eee"
            onHandleColor="#eee"
            draggable={false}
            onChange={handleActiveness}
            checked={active}
            checkedIcon={false}
            uncheckedIcon={false}
            height={15}
            width={30}
            handleDiameter={20}
            offColor="#f13030"
            onColor="#2dea8f"
          />
        </Group>

        <StormPieces>
          <p>
            {brainstormData.stormPieces.length}
            {` `}Stormpieces
          </p>
        </StormPieces>
      </Active>
    </Container>
  );
};

export default UserBrainstormCard;

import React，{useState，useffect}来自“React”；
从“反应开关”导入开关；
进口{
集装箱，
头脑风暴信息，
BrainstormTitle，
活跃的，
集团,，
风暴片，
}来自“/样式”；
从“../../pages/user dashboard”导入{Brainstorm}”；
从“../../hooks/useFormatDate”导入useFormatDate”；
从“伊默”进口农产品；
界面道具{
头脑风暴数据：头脑风暴；
}
常量UserBrainstormCard:React.FC=（{brainstormData}）=>{
如果（！brainstormData）返回加载。。。；
const[active，setActive]=useState（brainstormData.active）；
const formattedate=useformattate(
（brainstormData.createdAt为未知）为字符串
);
异步函数handleActivity（）{
setActive（！active）；
const response=wait fetch（“/api/brainstorm/update”{
方法：“放”，
正文：JSON.stringify（活动），
});
const data=wait response.json（）；
setActive（data.response.active）；
}
返回(
头脑风暴

{格式化日期}

{brainstormData.title}
活动：


{brainstormData.stormpices.length}
{``}风暴片

);
};
导出默认UserBrainstormCard；

对API的调用会发生，但当我更新页面时，它会返回到最初的值

---

我很确定问题与状态有关，我应该找到一种方法在状态中插入这些值。但是我不知道如何做的明确路径

一个简单的问题，当您更改开关时，

handleActivity

功能会正确触发，并且后端的数据实际上会更改？是的，它会更改…如果您对组件中的响应执行console.log，您会得到什么？我会得到一个对象。在其他一些数据中，我有一个活动属性，它在我每次运行HandleacTivenesa quick question时都会更改，当您更改开关时，

handleActiveness

功能会正确触发，并且数据在后端实际更改？是的，它会更改…如果您在组件中对响应执行console.log，你得到了什么？我得到了一个物体。在其他一些数据中，我有一个活动属性，它在每次运行handleActivity时都会更改

import React, { useState, useEffect } from "react";
import Switch from "react-switch";
import {
  Container,
  BrainstormInfo,
  BrainstormTitle,
  Active,
  Group,
  StormPieces,
} from "./styles";
import { Brainstorm } from "../../pages/user-dashboard";
import useFormatDate from "../../hooks/useFormatDate";
import produce from "immer";

interface Props {
  brainstormData: Brainstorm;
}

const UserBrainstormCard: React.FC<Props> = ({ brainstormData }) => {
  if (!brainstormData) return <h1>Loading...</h1>;

  const [active, setActive] = useState(brainstormData.active);

  const formatedDate = useFormatDate(
    (brainstormData.createdAt as unknown) as string
  );

  async function handleActiveness() {
    setActive(!active);

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

    const data = await response.json();

    setActive(data.response.active);
  }

  return (
    <Container>
      <BrainstormInfo>
        <p>Brainstorm</p>
        <p>{formatedDate}</p>
      </BrainstormInfo>
      <BrainstormTitle>
        <h3>{brainstormData.title}</h3>
      </BrainstormTitle>
      <Active>
        <Group>
          <p>Active:</p>
          <Switch
            offHandleColor="#eee"
            onHandleColor="#eee"
            draggable={false}
            onChange={handleActiveness}
            checked={active}
            checkedIcon={false}
            uncheckedIcon={false}
            height={15}
            width={30}
            handleDiameter={20}
            offColor="#f13030"
            onColor="#2dea8f"
          />
        </Group>

        <StormPieces>
          <p>
            {brainstormData.stormPieces.length}
            {` `}Stormpieces
          </p>
        </StormPieces>
      </Active>
    </Container>
  );
};

export default UserBrainstormCard;