I am not getting data from api after refreshing the web page in next.js

Question

I am working on a project, where I am using conditional rendering. I am not sure what the cause but I am not getting data from api after refreshing the page.

Image of the page on first load
Image after a page refresh

This is obviously not the desired behavior, what am I missing here? This is my fetch request code:

useEffect(() => {
  axios
    .get(path)
    .then((res) => {
      setRoundData(res.data[1]);
      setStudentData(res.data[2]);
      setFilterData(res.data[2]);
    })
    .catch((err) => console.log(err));
}, [path]);

Without seeing the code it will be very difficult to help. I suggest you edit the question and include at least your fetch logic. — Benjamin Rae
– Benjamin Rae, Commented Jun 2, 2023 at 10:16

Fabio Nettis · Accepted Answer · 2023-06-03 10:48:09Z

1

Create a async function which runs each time the path changes. You could try something like this:

useEffect(() => {
  async function fetchData() {
    const res = await axios.get(path);
    setRoundData(res.data[1]);
    setStudentData(res.data[2]);
    setFilterData(res.data[2]);
  }
  
  fetchData();
}, [path]);

edited Jun 3, 2023 at 10:48

Fabio Nettis

2,9211 gold badge15 silver badges28 bronze badges

answered Jun 2, 2023 at 11:44

Kannu Mandora

6926 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I am not getting data from api after refreshing the web page in next.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related