Estoy usando 2 useEffects en un archivo y el segundo useEffect depende del primero.
¿Hay alguna forma de retrasar el segundo useEffect hasta que se hayan obtenido los datos del primer useEffect?
const params = useParams() const [userData, setUserData] = useState({}) const [followers, setFollowers] = useState([]) useEffect(() => getUser(params.id), []) useEffect(() => { getFollowers(userData?.user?._id, auth.token) }, []) const getUser = async (id) => { const res = await getUserProfile(id) if (res) { setUserData(res) } } const getFollowers = async (id, token) => { const res = await getUserFollowers(id, token) if (res) { setFollowers(res) } }Ejecute el segundo useEffect solo si el primer useEffect ha recuperado sus datos:
const params = useParams() const [userData, setUserData] = useState(null) // initialize userData as null const [followers, setFollowers] = useState([]) useEffect(() => getUser(params.id), []) useEffect(() => { // wait until userData is defined to make the second call if (userData) getFollowers(userData?.user?._id, auth.token) }, [userData])Haga un useEffect y hágalo asíncrono y obtenga ambas funciones API allí con await. De lo contrario, también tiene una solución para agregar userData en 2nd useEffect como dependencia que puede agregar en su matriz de dependencia.
Parece que desea obtener seguidores cada vez userData los datos de usuario, así que conviértalo en una dependencia del efecto:
useEffect(() => getUser(params.id), []) useEffect(() => { const id = userData?.user?._id if (id) { getFollowers(id, auth.token) } }, [userData?.user?._id]) // <=====Eso volverá a ejecutar el efecto de seguidores cada vez que cambie esa ID.
Alternativamente, puedes combinarlos:
useEffect(() => { getUser(params.id), []) .then(userData => getFollowers(userData?.user?._id, auth.token)) .catch(error => { /* ...handle/report error here...*/ }) }, []); const getUser = async (id) => { const res = await getUserProfile(id) if (res) { setUserData(res) } return res // <==== Note returning the result as well as setting it } const getFollowers = async (id, token) => { const res = await getUserFollowers(id, token) if (res) { setFollowers(res) } } (En cualquier caso, el código debe manejar los rechazos de esas funciones async ).