警告:无法对已卸载的组件执行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中的这些值,这样我才能发出下一个请求??请帮帮我,伙计们。
发生这种情况是因为在装入组件之前,您正在异步回调中设置状态变量。您可以通过挂载标志来实现这一点:
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]);