I am making a request to my API from the client. I set the information in a React state. The weird thing is the following:
When I print the result of the fetch by console I get this:
But when I display to see in detail, specifically the "explore" array, I get that the result is empty:
The explore array is passed to two components by props to show a list, the super weird thing is that one of the components shows the information but the other does not
Fetch
const baseUrl = process.env.BASE_API_URL;
import { marketPlace } from "./mock";
import { requestOptions } from "utils/auxiliaryFunctions";
const getInitialMarketPlaceData = async (username: string) => {
try {
return await fetch(
`${baseUrl}marketplace/home/${username}`,
requestOptions()
)
.then((data) => data.json())
.then((res) => {
console.log(res.data)
if (res.success) {
return res.data;
}
});
} catch (err) {
throw err;
}
};
Components
export default function Marketplace() {
const [marketPlace, setMarketPlace] = useState<any>();
const [coachData, setCoachData] = useState<false | any>();
const [coach, setCoach] = useState<string>();
const { user } = useContext(AuthContext);
useEffect(() => {
if (!marketPlace) {
getInitialMarketPlaceData(user.username).then((data) => {
console.log("data", data);
setMarketPlace(data);
});
}
}, []);
useEffect(() => {
console.log("marketplace", marketPlace);
}, [marketPlace]);
useEffect(() => {
console.log("coachData", coachData);
}, [coachData]);
const changeCoachData = async (coach: string) => {
setCoach(coach);
let res = await getCoachProfile(coach);
setCoachData(res);
};
if (!marketPlace) {
return <AppLoader />;
}
return (
<main className={styles.marketplace}>
{marketPlace && (
// Highlited viene vacío de la API
<Highlited
highlitedCoaches={/*marketPlace.highlighted*/ marketPlace.explore}
></Highlited>
)}
{marketPlace.favorites.length !== 0 && (
<Favorites
changeCoachData={changeCoachData}
favCoaches={marketPlace.favorites}
></Favorites>
)}
{
<Explore
changeCoachData={changeCoachData}
exploreCoaches={marketPlace.explore}
></Explore>
}
{/*<Opinions
changeCoachData={changeCoachData}
opinions={marketPlace.opinions}
></Opinions>*/}
{coachData && (
<CoachProfileRookieView
coachData={coachData}
coachUsername={coach}
isCoach={false}
isPreview={false}
onClose={() => setCoachData(false)}
/>
)}
</main>
);
}