I have a problem in which some files are using new useEffect and some are using the older componentDidMount, I am more familiar with useEffect and I have the following async function below:
const [user, setUser] = useContext(UserContext);
useEffect(() => {
const fetchUser = async () => {
const user = await Auth.currentAuthenticatedUser();
getUserData(user.username).then((user) => {
setUser(user);
});
};
fetchUser();
}, []);
The above function is what I am trying to replicate below:
this.state = {
user: null,
};
async fetchUser() {
try {
const user = await Auth.currentAuthenticatedUser();
const res = await getUserData(user.username);
this.setState({ user: res });
console.log(user);
} catch (error) {
console.error(error, 'Error: cant retrieve user data');
}
}
async componentDidMount() {
await this.fetchUser();
}
However, I cannot retrieve the same outcome with the componentDidMount function, how could I do this?
Related
I have problem with async function. I need track.user in another function but my func getTracks() async. I don't have clue how can i get this.
const Player = ({trackUrl, index, cover, id}) => {
const [track, setTrack] = useState({})
const [user, setUser] = useState({})
useEffect(() => {
const getTracks = async () => {
await httpClient.get(`/track/${id}`)
.then((response) => {
setTrack(response.data);
})
}
getTracks();
getUser() // track.user undefined
}, [])
const getUser = async() => {
await httpClient.get(`/profile/${track.user}/`)
.then((response) => {
setUser(response.data);
})
}
}
I would declare both functions at the beginning of the component (you can later optimise them with useCallback but it's not that important in this phase).
const getTracks = async () => {
await httpClient.get(`/track/${id}`)
.then((response) => {
setTrack(response.data);
})
}
const getUser = async() => {
await httpClient.get(`/profile/${track.user}/`)
.then((response) => {
setUser(response.data);
})
}
I would then call an async function inside the useEffect hook. There are a couple of ways of doing it: you can either declare an async function in the useEffect hook and call it immediately, or you can call an anonymous async function. I prefer the latter for brevity, so here it is:
useEffect(() => {
(async () => {
await getTracks();
getUser();
})();
}, []);
Now when you call getUser you should be sure that getTracks has already set the track variable.
Here is the complete component:
const Player = ({trackUrl, index, cover, id}) => {
const [track, setTrack] = useState({})
const [user, setUser] = useState({})
const getTracks = async () => {
await httpClient.get(`/track/${id}`)
.then((response) => {
setTrack(response.data);
})
}
const getUser = async() => {
await httpClient.get(`/profile/${track.user}/`)
.then((response) => {
setUser(response.data);
})
}
useEffect(() => {
(async () => {
await getTracks();
getUser();
})();
}, []);
}
EDIT 07/18/22
Following Noel's comments and linked sandbox, I figured out that my answer wasn't working. The reason why it wasn't working is that the track variable was't available right after the getTrack() hook execution: it would have been available on the subsequent render.
My solution is to add a second useEffect hook that's executed every time the track variable changes. I have created two solutions with jsonplaceholder endpoints, one (see here) which preserves the most of the original solution but adds complexity, and another one (here) which simplifies a lot the code by decoupling the two methods from the setTrack and setUser hooks.
I'll paste here the simpler one, adapted to the OP requests.
export default function Player({ trackUrl, index, cover, id }) {
const [track, setTrack] = useState({});
const [user, setUser] = useState({});
const getTracks = async () => {
// only return the value of the call
return await httpClient.get(`/track/${id}`);
};
const getUser = async (track) => {
// take track as a parameter and call the endpoint
console.log(track, track.id, 'test');
return await httpClient.get(`profile/${track.user}`);
};
useEffect(() => {
(async () => {
const trackResult = await getTracks();
// we call setTrack outside of `getTracks`
setTrack(trackResult);
})();
}, []);
useEffect(() => {
(async () => {
if (track && Object.entries(track).length > 0) {
// we only call `getUser` if we are sure that track has at least one entry
const userResult = await getUser(track);
console.log(userResult);
setUser(userResult);
}
})();
}, [track]);
return (
<div className="App">{user && user.id ? user.id : "Not computed"}</div>
);
}
You can move the second request to the then block of the dependent first request,i.e., getTracks.
Also, you shouldn't mix then and await.
useEffect(() => {
const getTracks = () => {
httpClient.get(`/track/${id}`)
.then((response) => {
setTrack(response.data);
httpClient.get(`/profile/${response.data.user}/`)
.then((response) => {
setUser(response.data);
})
})
}
getTracks();
}, [])
You shouldn't be mixing thens with async/await. You should be using another useEffect that watches out for changes in the track state and then calls getUser with that new data.
function Player(props) {
const { trackUrl, index, cover, id } = props;
const [ track, setTrack ] = useState({});
const [ user, setUser ] = useState({});
async function getTracks(endpoint) {
const response = await httpClient.get(endpoint);
const data = await response.json();
setTrack(data);
}
async function getUser(endpoint) {
const response = await httpClient.get(endpoint);
const data = await response.json();
setUser(data);
}
useEffect(() => {
if (id) getTracks(`/track/${id}`);
}, []);
useEffect(() => {
if (track.user) getUser(`/profile/${track.user}`);
}, [track]);
}
On start, I'm loading the data in useEffect like this:
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(12);
useEffect(() => {
const loadVehicles = async (dealershipId, id) => {
try {
const data = await getUserRequests(dealershipId, id, {
offset: (page - 1) * perPage,
limit: perPage,
});
setRequests(data.results);
} catch (err) {}
};
const loadUser = async (userId) => {
try {
const user = await getUserById(userId);
setSelectedUser(user);
} catch (err) {}
};
const loadData = async () => {
setIsLoading(true);
await loadVehicles(dealershipId, userId);
await loadUser(userId);
setIsLoading(false);
};
loadData();
}, [dealershipId, page, perPage, userId]);
Here, in the dependecy array I have "page" and "perPage", which are for pagination for vehicles. When I go to, for example, second page:
const changePageHandler = (pageNumber) => {
setPage(pageNumber);
};
page is updating, and then useEffect is calling. But the problem is that I just want to call loadVehicles() and not the loadUser() function.
And when I put loadVehicles(dealershipId, userId) function outside of the useEffect, and then call it after setPage(pageNumber), it's not getting the right page, because page is not updated yet.
How can I call only loadVehicles() with the correct page?
You should use another "useEffect" hook for handling page changes. Also it is better to define your functions outside your hooks so you can use them in other places as well.
const [page, setPage] = useState(1);
const [perPage, setPerPage] = useState(12);
const loadVehicles = async (dealershipId, id) => {
try {
const data = await getUserRequests(dealershipId, id, {
offset: (page - 1) * perPage,
limit: perPage,
});
setRequests(data.results);
} catch (err) {}
};
const loadUser = async (userId) => {
try {
const user = await getUserById(userId);
setSelectedUser(user);
} catch (err) {}
};
const loadData = async () => {
setIsLoading(true);
await loadVehicles(dealershipId, userId);
await loadUser(userId);
setIsLoading(false);
};
useEffect(async() => {
await loadData();
}, [dealershipId, userId]);
useEffect(async() => {
setIsLoading(true);
await loadVehicles(dealershipId, userId);
setIsLoading(false);
}, [page, perPage]);
I am pretty sure you will understand the concept. The code above is just a hint.
I Dont know what is going on but even after using async and await keyword still the length is showing zero. Thanks in advance.
const commercial_shoots = [];
let test;
React.useEffect(() => {
async function fetchData() {
const app_ref = ref(storage, "Home/");
await listAll(app_ref)
.then((res) => {
res.items.forEach((itemRef) => {
getDownloadURL(itemRef).then((url) => {
commercial_shoots.push({ img: url });
});
});
})
.catch((error) => {
console.log(error);
});
}
fetchData();
}, []);
return <div>{commercial_shoots.length}</div>;
};
React only re-renders the component when state or props updates. Here, you are only updating a local variable. So, even when it updates, the UI does not reflect the change.
The solution would be to use commercialShoots as a state in the component.
const CommercialShoots = () => {
const [commercialShoots, setCommercialShoots] = useState([]);
useEffect(() => {
async function fetchData() {
try {
const app_ref = ref(storage, "Home/");
const res = await listAll(app_ref);
const downloadUrls = await Promise.all(res.items.map(itemRef) => getDownloadURL(itemRef));
const mappedUrlsToImg = downloadUrls.map((url) => ({ img: url });
setCommercialShoots(mappedUrlsToImg);
} catch (error) {
console.error(error);
}
}
fetchData();
}, []);
return <div>{commercial_shoots.length}</div>;
};
NOTE - Since we are using async / await extensively, I took the liberty of updating the .then() to async / await syntax.
function UserAccounts() {
const [accounts, setAccounts] = useState();
useEffect(() => {
async function fetchAccounts() {
const res = await fetch(
'https://proton.api.atomicassets.io/atomicassets/v1/accounts'
);
const { accounts } = await res.json();
setAccounts(accounts);
console.log(accounts);
}
fetchAccounts();
}, []);
}
I'm trying to understand why console.log shows nothing in this example and what is the correct way to console.log the data that is being fetched from the api.
Well, you need to get the structure of the returned payload from the API correct. It does not have an accounts property.
The payload looks like this:
{
"success":true,
"data":[{"account":"joejerde","assets":"11933"},{"account":"protonpunks","assets":"9072"}],
"queryTime": 1646267075822
}
So you can rename the data property while destructuring. const { data: accountList } = await res.json();
function UserAccounts() {
const [accounts, setAccounts] = useState();
useEffect(() => {
async function fetchAccounts() {
const res = await fetch(
'https://proton.api.atomicassets.io/atomicassets/v1/accounts'
);
const { data: accountList } = await res.json();
setAccounts(accountList);
// logging both the state and the fetched value
console.log(accounts, accountList);
// accounts (state) will be undefined
// if the fetch was successful, accountList will be an array of accounts (as per the API payload)
}
fetchAccounts()
}, [])
return <div>
{JSON.stringify(accounts)}
</div>
}
Edit: using some other variable name while destructuring, confusing to use the same variable name as the state (accounts).
Working codesandbox
One thing I would change is working with try/catch surrounding async/await statements.
If your await statement fails it will never reach the console.log statement.
Unless you have another component handling those errors, I would use it in that way.
That is my suggestion:
function UserAccounts() {
const [accounts, setAccounts] = useState();
useEffect(() => {
try {
async function fetchAccounts() {
const res = await fetch(
'https://proton.api.atomicassets.io/atomicassets/v1/accounts'
);
const { accounts } = await res.json();
setAccounts(accounts);
console.log(accounts);
}
} catch (err) {
console.log(err)
// do something like throw your error
}
fetchAccounts();
}, []);
}
since state function runs asyncronousely . therefore when you use setAccounts it sets accounts variable in async way , so there is a preferred way of doing this thing is as below
problems i seen
1.fetch result should destructured with data instead of accounts variable
2.setAccounts function is running async way so it will not print result immedietly in next line
import { useEffect, useState } from "react";
export default function App() {
const [accounts, setAccounts] = useState();
async function fetchAccounts() {
const res = await fetch(
"https://proton.api.atomicassets.io/atomicassets/v1/accounts"
);
const { data } = await res.json();
setAccounts(data);
}
// on component mount / onload
useState(() => {
fetchAccounts();
}, []);
// on accounts state change
useEffect(() => {
console.log(accounts);
}, [accounts]);
return <div className="blankElement">hello world</div>;
}
check here sample
I'm learning how to use Hooks and I'm trying to fetch data from 2 sources with 2 hooks when the 2nd hook take as parameter the result from 1rst hook.
I know you can do that with class (multiple axios get) but I'm trying to do it with hooks.
I have a file where I've built my axios.get and a file where I try to render the data.
I try to put {user.id} into the second hooks but it doesn't work. When I put the value of the user id (for example '1') in the second hook it's working.
Long story short I try to find the best way to only show connected user objects...I'm not an expert so there is probably a better way to do that.
Any idea of how to do that ? Thanks for helping me !!!
Here is the code:
GetObjects.js:
export const getUser = async (id) => {
const url = `http://127.0.0.1:8000/api/user`;
try {
const response = await axios.get(url);
return { response, isError: false };
} catch (response) {
return { response, isError: true };
}
};
export const getUserObject = async (userId) => {
const url = `http://127.0.0.1:8000/api/objects/?owner=${userId}`;
try {
const response = await axios.get(url);
return { response, isError: false };
} catch (response) {
return { response, isError: true };
}
};
RenderObjects.js
...
function FetchUserObjects(props) {
const [objects, setObjects] = useState([]);
const [user, setuser] = useState([]);
useEffect(() => {
const loadUser = async () => {
const { response, isError } = await getUser();
if (isError) {
setuser([]);
} else {
setuser(response.data);
}
};
loadUser();
}, []);
useEffect(() => {
const loadObjects = async () => {
const { response, isError } = await getUserObject();
if (isError) {
setObjects([]);
} else {
setObjects(response.data);
}
};
loadObjects();
}, []);
so this is not working :
const { response, isError } = await getUserObject({user.id});
But this is working :
const { response, isError } = await getUserObject(1);
Try it:
function FetchUserObjects(props) {
const [objects, setObjects] = useState([]);
const [user, setuser] = useState([]);
useEffect(() => {
const loadUser = async () => {
const { response, isError } = await getUser();
if (isError) {
setuser([]);
} else {
setuser(response.data);
}
};
loadUser();
}, []);
useEffect(() => {
if (!user) return
const loadObjects = async () => {
const { response, isError } = await getUserObject(user.id);
if (isError) {
setObjects([]);
} else {
setObjects(response.data);
}
};
loadObjects();
}, [user]);