How can I store an Axios response array of object in a React State (with TypeScript)

Question

I'm sorry in advance, this is for a professional project and I can't detail things, so I gotta explain things without telling the true terms.

I'm sending a GET request to an API. This API sends a response in this format :

[0:
 [
   0: { permission: 1
       thing: { title: 'title' id: '1234'}
      }
   1: { permission: 1
       thing: { title: 'title2' id: '5678'}
      }
 ]
]

In my code, I have a state (use hooks) called things, and I wanna store the 'things' Axios send in response. More clearly, I wanna store the 0 and the 1 inside the big 0.

I made an interface like this one :

interface IThing {
id: string;
title: string;
permission: number;
};

in order to type my state like this :

const [things, setThings] = useState<IThing[]>();

Now, here's the function I use to get data from Axios and try to store it in my state (maybe it's important to precise that this function is in a useEffect) :

const getMyThings = async () => {
  try {
    const getThings = await axios.get(
      "url",
      {
        headers: {
          ...
        },
      }
    );

    const result = getThings.data;

    if (things) {
    const newThings = [...things];
    console.log(newProjects);
    newThings.push(result);
    setThings(newThings);
    console.log(projects);
    }
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.log(error.response);
    } else {
      console.log(error);
    }
  }

In this function, the console.log(result) print the axios response. But once I push it in the state, a console.log() of things always returns undefined.

I also tried with this :

const newThings = [...(things || [])];
    newThings.push(result);
    console.log(newThings);
    setThings(newThings);
    console.log(things);

but the same thing happen : the console.log(newThings) returns the axios response, but the console.log(things) returns undefined.

One thing I saw is that my state is inferred by TypeScript as IThing | undefined, it probably comes from here but I don't know what to do as I'm new with TypeScript.

Thanks in advance for your help!

`but the console.log(things) returns undefined.` That's expected. Calling `setThings` does not change the value in the local variable `things`, so if it was `undefined` before, it's `undefined` after. Instead, it requests react to re-render the component. That new render will get a new set of local variables. If you'd like to verify that it rerendered with the new array, then put a log statement in the body of the component. — Nicholas Tower, Jan 18 '22 at 16:15
You must check `console.log(things)` update in `useEffect` with dependency, because `setThings(newThings);` is asyncronous — Vitaliy Rayets, Jan 18 '22 at 16:17

score 0 · Answer 1 · answered Jan 18 '22 at 16:14

In the simplest terms, the 'things' in your state can be only updated once the whole function concludes. When you the set the new state, the component re-renders after your function is over.

If you log the 'things' in the main component or outside this function, it will show you the new values but you cannot expect it to update while your function is still running.

How can I store an Axios response array of object in a React State (with TypeScript)

1 Answers1