Can't perform a React state update on an unmounted component, I tried to fix it but it still renders the same problem - node.js

Question

Hi there I am using Chart.js to create a doughnut chart, but I see to get "Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function." I will show my front end and back end that are relevant to the question. Also the server side fetches everything correctly and it also console logs it perfectly in the front end the way I need it to.
results. js basically the server side
router.get("/occ", authorization, async (req, res) => {
try {
console.log(req);
const result = await pool.query(
// "SELECT occupation,COUNT(occupation) FROM resources GROUP BY occupation;",
"SELECT occupation,COUNT(occupation) as values FROM resources GROUP BY occupation"
);
console.log(req);
console.log(result);
res.status(200).json({
status: "success",
data: {
occupationResults: result.rows, //this gets the one row we need
},
});
} catch (err) {
console.error(err.message);
}
});
DoughnutChart.js the component itself
import React, { Fragment, useState, useEffect } from "react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";
ChartJS.register(ArcElement, Tooltip, Legend);
const DoughnutChart = () => {
// const [user_id, setuserid] = useState("");
const [results, setResults] = useState([]);
async function getResults() {
try {
const response = await fetch(`http://localhost:4001/results/occ`, {
method: "GET",
//pass token with localstorage because it is stored in the header
headers: { token: localStorage.token },
});
const parseRes = await response.json();
// setpersonalForm(parseData);
console.log(parseRes);
// setUsername(parseRes.username);
setResults(parseRes.data.occupationResults);
// setuserid(parseRes.user_id); //
// const encryptStorage = new EncryptStorage('secret-key');
// removed the localstorage user id
console.log(parseRes.data.occupationResults);
} catch (err) {
console.error(err.message);
}
}
var data = {
labels: results?.map((x) => x.occupation),
datasets: [
{
label: `${results?.length} Amount per Occupation`,
data: results?.map((x) => x.values),
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 1,
},
],
};
var options = {
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
},
},
legend: {
labels: {
fontSize: 26,
},
},
};
//going to make a request when we get to this component, this is for getting from database
useEffect(() => {
getResults();
return () => {
setResults({}); // I added this but it still doesn't work
};
}, []);
return (
<div>
<Doughnut data={data} options={options} height={400} />
</div>
);
};
export default DoughnutChart;
Where I am importing the component.
import React, { Fragment, useState, useEffect } from "react";
import DoughnutChart from "./DoughnutChart";
//import { toast } from "react-toastify";
import "./pagecss/home.css";
// import { FontAwesomeIcon } from "#fontawesome-free-solid";
// import { encryptStorage } from "./encrypt";
const Home = ({ setAuth }) => {
const [username, setUsername] = useState("");
const [user_id, setuserid] = useState("");
// const [personalForm, setpersonalForm] = useState([]);//
// const [Pform, setform] = useState(false);
async function getUsername() {
try {
const response = await fetch("http://localhost:4001/home/", {
method: "GET",
//pass token with localstorage because it is stored in the header
headers: { token: localStorage.token },
});
const parseRes = await response.json();
// setpersonalForm(parseData);
setUsername(parseRes.username);
setuserid(parseRes.user_id); //
// const encryptStorage = new EncryptStorage('secret-key');
// encryptStorage.setItem("user_id", parseRes.user_id);
console.log(parseRes);
} catch (err) {
console.error(err.message);
}
}
//going to make a request when we get to this component, this is for getting from database
useEffect(() => {
getUsername();
}, []);
return (
<Fragment>
<div className="container">
<div className="row">
<div className="col-md-4 col-sm-12 d-flex justify-content-center">
<div className="card-body text-center text-white">
<i className="fa-solid fa-bullseye fa-6x my-3 "></i>
<h2 className="card-title mb-4">Card Title</h2>
<p className="card-text">
Our Mission is to help the community out by helping people with
mental health issues
</p>
</div>
</div>
<div className="col-md-4 col-sm-12 d-flex justify-content-center">
<div className="card-body text-center text-white">
<i className="fa-solid fa-glasses fa-6x text-center my-3 "></i>
<h2 className="card-title mb-4">Card Title</h2>
<p className="card-text">
Our Mission is to help the community out by helping people with
mental health issues
</p>
</div>
</div>
<div className="col-md-4 col-sm-12 d-flex justify-content-center">
<div className="card-body text-center text-white pb-4">
<i className="fa-solid fa-hand-holding-medical fa-6x text-center my-3 "></i>
<h2 className="card-title mb-4">Card Title</h2>
<p className="card-text">
Our Mission is to help the community out by helping people with
mental health issues
</p>
</div>
</div>
</div>
</div>
<div className="container-fluid">
<div className="row justify-content-around">
<div
className="card col-lg-5 col-md-6 col-sm-12 d-flex justify-content-center mb-5 "
id="CardOne"
>
<img
src={require("./pictures/ProPic.jpg")}
className="card-img-top"
id="pictureOne"
alt="..."
/>
<div className="card-body text-center text-black">
<h2 className="card-title mb-4">Alexey Aulov</h2>
<p className="card-text">
Hi my name is Alexey Aulov I am a senior at College of Staten
Island studying Information System and Informatics. I had the
original idea of Essential Health after I witnessed that
sometimes the best way for people to get mental help is to have
Therapist that can relate to you as much as possible to help you
out. Helping people gives me the most gratitude in life.
</p>
</div>
</div>
<div
className="card col-lg-5 col-md-6 col-sm-12 d-flex justify-content-center mb-5 "
id="CardTwo"
>
<img
src={require("./pictures/ProPic.jpg")}
className="card-img-top"
alt="..."
id="pictureTwo"
/>
<div className="card-body text-center text-black">
<h2 className="card-title mb-4">Card Title</h2>
<p className="card-text">
Our Mission is to help the community out by helping people with
mental health issues
</p>
</div>
</div>
</div>
<DoughnutChart />
</div>
</Fragment>
);
};
export default Home;