How To Have Multiple Axios inside UseEffect That Doesnt Turn Error? - reactjs

Question

I need 3 axios :
to detect token, so I know which user is logged in. This is so that I can have a "userid" that I can pass for my other axios endpoints
the list of orders : returns an array of all the order history of that user
the data of the user, such as first_name, last_name, email etc
here is how it looks like:
const cookies = new Cookies();
const token = cookies.get("jwtToken");
const [user_detail, setuser_detail] = useState({});
const [userid, setuserid] = useState(null);
const [refresh, setrefresh] = useState(false);
const [orderData, setorderData] = useState([]);
const [userData, setuserData] = useState({});
useEffect(() => {
axios
.get(`http://localhost:3001/auth/token/decode/${token}`)
.then((result) => {
setuser_detail(result.data.user_detail);
setuserid(result.data.user_detail.user_id);
setrefresh(!refresh);
});
}, []);
useEffect(() => {
axios
.get(`http://localhost:3001/users/orders/${userid}`)
.then((res) => {
setorderData(res.data);
})
.catch((err) => console.log(err));
axios.get(`http://localhost:3001/users/detail/${userid}`).then((res) => {
setuserData(res.data[0]);
});
}, [refresh]);
If there is only the useEffect for Token and Orders, it works fine. However when I added the 3rd (user details) useEffect, it doesn't seem to want to receive the response. It will show only if I saved my react file, and then (without restarting my npm start) add the 3rd useEffect. It works until I refresh it, and it returns "TypeError: Cannot read property 'first_name' of undefined". Which doesn't make sense because if I don't refresh it, the first_name can in fact be rendered. I am pretty confused.

Answer 1

Use a single useEffect for onComponentMount, and create an async function inside your useEffect to handle your axios calls.
useEffect(() => {
async callAxios() => {
const result = await axios.get(`${url_one}`)
const user_orders = await axios.get(`${url_two}`)
const user_details = await axios.get(`${url_three}`)
}
callAxios()
}, [])