I have nextjs frontend that fetch data from strapi backend. Problem is that data is empty even if i can see on strapi dev logs that request has been made.
This is next.js code
JavaScript
x
34
34
1
import { useRouter } from "next/router";
2
import React, { useEffect } from "react";
3
4
const Room = () => {
5
const router = useRouter();
6
let fetchData;
7
8
useEffect(() => {
9
if (router.asPath !== router.route) {
10
getDataNames();
11
}
12
}, [router]);
13
14
const getDataNames = () => {
15
try {
16
fetch("http://localhost:1337/rooms?_id=" + router.query.id)
17
.then((response) => response.json())
18
.then((data) => (fetchData = data));
19
console.log(fetchData);
20
} catch (e) {
21
console.error(e);
22
}
23
};
24
25
return (
26
<div>
27
<p>{router.query.id}</p>
28
<p>{fetchData}</p>
29
</div>
30
);
31
};
32
33
export default Room;
34
And here is the strapi log
JavaScript
1
2
1
[2021-02-23T14:06:20.845Z] debug GET /rooms?_id=6034aac1ba63472e9878ed25 (27 ms) 200
2
But I don’t know why is data empty. Truth is that the response consist of base64 long text but I am not sure if that can cause the problem. Thanks in advance for any help.
Advertisement
Answer
JavaScript
1
29
29
1
const Room = () => {
2
const router = useRouter();
3
//let fetchData;
4
const [fetchData, setFetchData] = React.useState('');
5
useEffect(() => {
6
if (router.asPath !== router.route) {
7
getDataNames();
8
}
9
}, [router]);
10
11
const getDataNames = () => {
12
try {
13
fetch("http://localhost:1337/rooms?_id=" + router.query.id)
14
.then((response) => response.json())
15
.then((data) => { setFetchData(data); });
16
console.log(fetchData);
17
} catch (e) {
18
console.error(e);
19
}
20
};
21
22
return (
23
<div>
24
<p>{router.query.id}</p>
25
<p>{fetchData}</p>
26
</div>
27
);
28
};
29
You can use useState
hook for React state.