Axios only fetches Azure API response ONCE - reactjs

Question

I am trying to fetch my blobs with axios inside my React app using the Azure REST API (and parse it to JSON as it comes in as a XML response). Problem here is that it fetches correctly once, and when the page is refreshed it does not fetch anything else, showing undefined whenever I try to access any of the data, and returning empty array in console... what am I doing wrong?
const [images, setImgs] = useState([])
useEffect(() => {
const fetchData = async () => {
const response = await axios.get(`https://${process.env.AZURE_SPACE}.blob.core.windows.net/${process.env.AZURE_CONTAINER}?restype=container&comp=list&${process.env.AZURE_TOKEN}`);
const newJson = JSON.parse(convert.xml2json(response.data, {compact: true, spaces: 4}))
setImgs(newJson);
}
fetchData();
console.log(images)
}, []);

Answer 1

Try
await fetchData();
Otherwise, your console log is called before the answer coming back from azure

Answer 2

So, if you checking console.log(images) why this is still blank :
setImgs(newJson); // is also async
fetchData();
console.log(images) //<-- So it won't reflected immediately right after fetchData()
But your DOM will get updated, you can confirm it.
You can run the below snippet and check HTML and conosle.log both :
setUsers([...users, "Vivan" , "Darshita"]); // is async
console.log(users); // Due to setUsers's async behaviour it still console.log old values
const { useState , useEffect } = React;
const App = () => {
const [users,setUsers] = useState(['Vivek' , 'Darsh']);
useEffect(() => {
setTimeout(() => {
setUsers([...users, "Vivan" , "Darshita"]);
console.log(users);
},2000);
},[]);
return (
<div>
{ users.map(user => <p>{user}</p>) }
</div>
);
}
ReactDOM.render(<App />, document.getElementById('react-root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

Answer 3

So it sounds like two separate questions.
How to solve the await issue:
const [images, setImgs] = useState([])
useEffect(() => {
const wrapperFunc = async () => {
const fetchData = async () => {
const response = await axios.get(`https://${process.env.AZURE_SPACE}.blob.core.windows.net/${process.env.AZURE_CONTAINER}?restype=container&comp=list&${process.env.AZURE_TOKEN}`);
const newJson = JSON.parse(convert.xml2json(response.data, {compact: true, spaces: 4}))
setImgs(newJson);
}
await fetchData();
console.log(images)
};
wrapperFunc();
}, []);
The code inside the wrapperFunc can now wait for fetchData to return before writing to the console.
The second issue where it is only getting called once. It could be fixed as a result of this new code. However, I ran into something similar with React Hot Loading where the gating state was already set, so it would rerun my new code. I had to just change the state manually and then the code ran.