提问者:小点点

警告:无法对已卸载的组件执行React状态更新。(API重新请求和更新状态)


警告:无法对已卸载的组件执行React状态更新。这是一个no-op,但它表示应用程序中存在内存泄漏。要修复此问题,请取消useEffect清理函数中的所有订阅和异步任务。

嗨,伙计们,我有这个应用程序在反应,我假设图恢复一些值的json数组和使用是在各种ger请求,但我面临这个错误。

这就是我的密码

API请求

import api from "./api";

export const authenticate = async (values) => {
  let functionReturn;
  await api("/users/v1/auth/signin", {
    method: "POST",
    auth: {
      username: values.email,
      password: values.password,
    },
  })
    .then((response) => {
      functionReturn = response;
    })
    .catch((err) => {
      throw Error(err.message);
    });

  return functionReturn;
};

export const fetchUserData = async (token) => {
  const { data } = await api("/users/v1/user/me", {
    method: "GET",
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
  return data;
};

//Adicionando essas funcões/variaveis na intenção de resgatar Json

export const fetchUserProjects = async (token) => {
  const { data } = await api("/projects/v1/project", {
    method: "GET",
    headers: {
      Authorization: `Bearer ${token}`,
    },
  })
  return data;
};

export const fetchMapById = async (token, projectId) => {
  const {data} = await api(`/projects/v1/project/${projectId}`,
  {
    method: "GET", 
    headers: {
      Authorization: `Bearer ${token}`,
  },
})
 return data;
};

export const fetchEncounterByMaps = async (token) => {
  const {data} = await api("/projects/v1/map/60e481ef9692e14e21c51262",
  {
    method: "GET", 
    headers: {
      Authorization: `Bearer ${token}`,
  },
})
 return data;
};

反应主页

import { useContext, useEffect, useState } from "react";
import { AuthContext } from "../providers/auth";
import {
  fetchUserData,fetchUserProjects,fetchMapById, fetchEncounterByMaps, fetchUserGetProjectById
  // fetchUserProjects,
} from "../../services/requestFunctions";
import Navbar from "../Navbar";
import Kits from "../Kits";
import Button from "../pontosDeEncontro";

import "./styles.scss";

const Strateegia = () => {
  const [user, setUser] = useState({});
  //Aqui está a chamada do valor de id para a função seguinte
  const [idKitData, setIdKitData] = useState("");
  //Aqui estão os dados do mapa em si, é daqui que se resgata os kits (linha 51) \/
  const [kitData, setKitData] = useState("");
  //Retorno da linha 62 (aqui estão os pontos de encontro) \/
  const [MapsData, setMapsData] = useState("");
  // const [projects, setProjects] = useState([]);
  const auth = useContext(AuthContext);



  useEffect(() => {
    fetchUserData(auth.apiToken).then((data) => {
      console.log(data);
      setUser(data);
  }, [auth.apiToken]);

  useEffect(() => {
    fetchUserProjects(auth.apiToken).then((data) => {
      console.log(data);
      setIdKitData(data);
    });
  }, [auth.apiToken]);

  //Aqui estão os dados do mapa em si, é daqui que se resgata os kits (linha 51)
  useEffect(() => {
    fetchMapById(auth.apiToken, idKitData.projects[1].lab.id).then((data) => {
      console.log(data);
      setKitData(data);
    });
  }, [auth.apiToken]);


  //Retorno da linha 62 (aqui estão os pontos de encontro)
  useEffect(() => {
    fetchEncounterByMaps(auth.apiToken).then((data) => {
      console.log(data);
      setMapsData(data);
    });
  }, [auth.apiToken]);


  

  /*<img className="bgImage" src="Calendar_SVG 1.svg"/>  Imagem para adicionar na tela de logado*/

  return (
    
    <div className="Wrapper">
      <Navbar username={user.name} />
      <div className="textIntro">
        <h3>Aqui estão todos os seus projetos na plataforma Strateegia. <br/>
         Selecione o projeto para agendar seus pontos de conversação em sua Google Agenda.</h3>
         <img className="image1" src="Calendar_SVG 1.svg" />
      </div>
      
            <div className="pontosDeEncontroTemplate">
                <Kits nomeMapa={kitData?.title} dataEncontro={MapsData?.id} mapData={MapsData?.points}/>
                
            </div>
    
      <footer className="footer">
      Desenvolvido por <a href="https://www.linkedin.com/in/rafaelvarelati/" target="_blank">Rafael Varela (Desenvolvedor fullstack)</a>, <a href="https://www.linkedin.com/in/diego-santos-ab17011b8/" target="_blank">Diego Santos (Ui/Ux Designer)</a> e <a href="https://www.linkedin.com/in/caroules/" target="_blank">Carolina Aguiar (Designer)</a>
      </footer>    

    </div>
  );
};

export default Strateegia;

我真的需要使用json中的这些值,这样我才能发出下一个请求??请帮帮我,伙计们。


共1个答案

匿名用户

发生这种情况是因为在装入组件之前,您正在异步回调中设置状态变量。您可以通过挂载标志来实现这一点:

import {useRef} from 'react'

const Strateegia = () => {

  const isMountedRef = useRef()

  const [user, setUser] = useState({});
  //Aqui está a chamada do valor de id para a função seguinte
  const [idKitData, setIdKitData] = useState("");
  //Aqui estão os dados do mapa em si, é daqui que se resgata os kits (linha 51) \/
  const [kitData, setKitData] = useState("");
  //Retorno da linha 62 (aqui estão os pontos de encontro) \/
  const [MapsData, setMapsData] = useState("");
  // const [projects, setProjects] = useState([]);
  const auth = useContext(AuthContext);

  useEffect(() => {
    isMountedRef.current = true
    return () => isMountedRef.current = false //useEffect cleanup
  }, [])

  useEffect(() => {
    fetchUserData(auth.apiToken).then((data) => {
      console.log(data);
      if(isMountedRef.current) setUser(data);
  }, [auth.apiToken]);

  useEffect(() => {
    fetchUserProjects(auth.apiToken).then((data) => {
      console.log(data);
      if(isMountedRef.current) setIdKitData(data);
    });
  }, [auth.apiToken]);

  //Aqui estão os dados do mapa em si, é daqui que se resgata os kits (linha 51)
  useEffect(() => {
    fetchMapById(auth.apiToken, idKitData.projects[1].lab.id).then((data) => {
      console.log(data);
      if(isMountedRef.current) setKitData(data);
    });
  }, [auth.apiToken]);


  //Retorno da linha 62 (aqui estão os pontos de encontro)
  useEffect(() => {
    fetchEncounterByMaps(auth.apiToken).then((data) => {
      console.log(data);
      if(isMountedRef.current) setMapsData(data);
    });
  }, [auth.apiToken]);