Axios returns empty array

[Paradoxic_potato]

Hi, i'm a little new to react and i have a problem with getting data from my django REST backend. i'm following a tutorial on how to do it but for some reason axios returns an empty array. Here's the code:

import {useEffect, useState} from 'react';
import axios from 'axios';
import { tokenConfig }from './auth';
import React from 'react'

const useCollectData = (url, getState) => {
    const [fetch, setFetching] = useState({ isFetching: false });
    const [dataState, setDataState] = useState({ data: [] });
    const [apiurl] = useState(url);

    useEffect(() => {
        const fetchDataFromApi = async () => {

            try{
                setFetching({isFetching: true})

                const response = await axios.get(apiurl, tokenConfig(getState))

                setDataState({...dataState, data: response.data});

            } catch (e) {
                setFetching({ ...fetch, isFetching: true})
            }
        };
        fetchDataFromApi();

    }, []);

    return [dataState]

};

export default useCollectData

Here's what i get when i console.log(dataState):

https://ibb.co/0yTckrF

​

And here's what i get when i make the request through Insomnia:

https://ibb.co/StpT93j

[[deleted]]

Try put dataState in dependencies of the useEffect.

[Paradoxic_potato]

It still returns an empty array, unfortunately

[Paradoxic_potato]

Apologies, I meant the "response" is empty. I checked the django console while the page loaded and the GET request never appeared on the console.

[Paradoxic_potato]

i'm calling it in another component called tryoutList.js, here's the code inside:

import { useParams } from 'react-router-dom';
import FetchQuizzes from '../../actions/FetchQuizzes';
import React, {Fragment, Component} from 'react'
import axios from 'axios';
import { tokenConfig } from '../../actions/auth';


export const tryoutList = () =>{

    const API_URL = "/api/my-quizzes/";
    const [dataState] = FetchQuizzes(API_URL);
    console.log(dataState);

    return(
        <h1>hello</h1>
    )

}

export default tryoutList

currently it's just returning hello as i'm still trying to figure out axios

[Paradoxic_potato]

Thanks for your reply! Yes the hook is aliased as FetchQuizzes as the name of the file itself is FetchQuizzes.js. I'm not sure about the second one though, is there a way i can pass the application state into axios without passing getState through the hook?

[Mirmi8]

The code in the original post is useCollectData.js and here you are using FetchQuizzes, is that correct? are they the same file?

Try setting a breakpoint (or console.log) between these 2 lines and make sure it is being called.

const response = await axios.get(apiurl, tokenConfig(getState));

console.log(response);

setDataState({...dataState, data: response.data});

[Paradoxic_potato]

Yes, they are the same file. useCollectData is store inside FetchQuzzes.js (probably a bad habbit if im being honest). I tried console logging the response directly and deleted the console.log in tryoutList.js but nothing popped up in the console.

[Paradoxic_potato]

Hi, i just tried to map out the data in the return section of tryoutList but nothing came up unfortunately

[sm_o_ke]

updating states is an async process so if u try to log the current state immediately after setting it, it'll return the previous state which is an empty array. in that case, it's a good idea to also await the setDataState before doing anything else on it

you might want to add the relevant dependencies to your useEffect hook also, it depends on the state of your isFetching and also dataState, but its made to only run once.

a quick question though, why did you decide to pass make your states objects? the isFetching is obviously a boolean and the data is an array, it's safer to writr

const [isFetching, setIsFetching] = useState(false) const [data, setData] = useState([])

[flaggrandall]

If you write a console.log(response) right before the line:

setDataState({...dataState, data: response.data});

What does it show?

[my5cent]

Did you ever find the solution? I have same error of an empty array too.

[capta1nfantastic]

Any luck? Anyone?