Initially, I had a React class that was fulfilling its purpose perfectly. However, I had to convert it into a functional component in order to utilize the useLocation() hook.
After making this change, I encountered an issue where the state updates were not functioning as expected anymore.
The current structure of my function is as follows:
import * as React from "react";
import { useEffect, useState } from "react";
import Axios from "axios";
import { useLocation } from "react-router-dom";
const URL = `my-path`;
const Sessions: React.FC<{ loadingParam?: boolean | undefined, someBooleanParam?: boolean | undefined, data?: AnyType[] | undefined }> = ({ loadingParam = true, someBooleanParam = undefined, data = undefined}) => {
const [loading, setLoading] = useState(loadingParam);
const [someBoolean, setSomeBoolean] = useState(someBooleanParam);
const [dataFetch, setDataFetch] = useState(data);
const location:any = useLocation();
useEffect(() =>
{
if(location.state == null){
console.log("first implementation");
} else {
const dataToFill:AnyType[]|undefined = location.state.data;
if( data ) {
setDataFetch(dataToFill);
setLoading(false);
setSomeBoolean(undefined);
}
}
}
,
[setDataFetch, setLoading, setSomeBoolean]
);
async function fetchData() {
try {
setLoading(true);
await Axios.get<AnyType[]>(URL)
.then(res => {
if (res.status === 200 && res != null) {
console.log("1 ", dataFetch); //undefined
console.log("1 bis ", res.data); //the data I want in the form I want
var copy:AnyType[] = [...res.data];
setDataFetch([...res.data]);
console.log("2 ", dataFetch); //undefined
console.log("2 ter ", copy); //the data I want in the form I want
setDataFetch(copy);
console.log("2 ", dataFetch); //undefined
setLoading(false);
if (dataFetch?.length === parseInt(someValue)){
setSomeBoolean(true);
} else {
setSomeBoolean(false);
}
} else {
console.log('problem when fetching the data from backend');
}
})
.catch(error => {
console.log(error);
});
}
catch (exception) {
console.log(exception);
}
}
console.log("8 ", dataFetch); //Appears in the web console several times during the execution of the fetchData function with the data I want
return(
<div className="container">
<div>
<button onClick={fetchData}> Click to get data </button>
</div>
{(someBoolean == true && loading == false) ?
Some Action
: <></>
</div>
);
}
export default Sessions;
Within the fetchData function, there seems to be a problem where dataFetch array size needs to be known in the .then block but it remains undefined at runtime. Creating a copy within the same function helps define it. This behavior is puzzling.
I attempted to move the Axios call out of fetchData by creating an asynchronous function that returned a promise, but the outcome remained similar.
I even tried making the fetchData function synchronous without the try/catch block, yet the issue persisted.
My ultimate goal is to pause the flow in the fetchData function inside the .then block, populate dataFetch, check the array size, and then render the component. Avoiding setTimeout for such behavior because it appears too static. Is there an alternative method?
If anyone can identify what could be wrong in this code causing this behavior, your assistance would be greatly appreciated. Thank you in advance.