Actualmente, estoy creando una página de perfil donde inicialmente obtendrá los detalles del perfil de usuario desde un punto final de API. Quiero tener un indicador de carga que represente el estado de recuperación. Ahora estoy usando el gancho useState donde almaceno un valor booleano para el estado isLoading. Sin embargo, después de leer la documentación sobre useState, indicó que puede ser asíncrono. Por lo tanto, ¿cómo actualizo correctamente isLoading a verdadero primero y luego ejecuto la lógica de búsqueda? Ahora mismo aquí está mi fragmento de código.
function Profile() { const [isLoading, setIsLoading] = useState(false); const [user, setUser] = useState(null); const { username } = useParams(); const fetchUserDetails = async (username) => { setIsLoading(true); try { const userRes = await API.graphql({ query: queries.getUser, variables: { username }, }); if (userRes.error) { throw new Error({ cause: userRes.error }); } setUser(userRes.data.getUser); setIsLoading(false); } catch (error) { console.error(error); // push to error page setIsLoading(false); } }; // Fetch user profile data useEffect(() => { fetchUserDetails(username); }, []); ...En su caso de uso de ejemplo, simplemente puede configurar isLoading en true inicialmente y ejecutar su búsqueda en el montaje.
function Profile() { const [isLoading, setIsLoading] = useState(true); const [user, setUser] = useState(null); const { username } = useParams(); // Fetch user profile data useEffect(() => { const fetchUserDetails = async (username) => { try { const userRes = await API.graphql({ query: queries.getUser, variables: { username }, }); if (userRes.error) { throw new Error({ cause: userRes.error }); } setUser(userRes.data.getUser); setIsLoading(false); } catch (error) { console.error(error); // push to error page setIsLoading(false); } }; fetchUserDetails(username); }, []); pero si desea observar los cambios en isLoading , por ejemplo, para un botón de recarga, puede configurarlo como false inicialmente, configurarlo como verdadero en un useEffect en el montaje y hacer que su fetch useEffect dependa de isLoading
function Profile() { const [isLoading, setIsLoading] = useState(false); const [user, setUser] = useState(null); const { username } = useParams(); // set isLoading to true on-mount useEffect(() => { setIsLoading(true) },[]); // Fetch user profile data useEffect(() => { const fetchUserDetails = async (username) => { try { const userRes = await API.graphql({ query: queries.getUser, variables: { username }, }); if (userRes.error) { throw new Error({ cause: userRes.error }); } setUser(userRes.data.getUser); setIsLoading(false); } catch (error) { console.error(error); // push to error page setIsLoading(false); } }; if (isLoading) { fetchUserDetails(username); } }, [isLoading]); function triggerReload() { setIsLoading(true) }la idea es actualizar el isLoading inicial a verdadero dentro de la función de búsqueda y lo hiciste correctamente. lo que falta es agregar la condición if dentro de useEffect cuando isLoading es verdadero y luego obtener los detalles del usuario.
useEffect(() => { if(isLoading){ fetchUserDetails(username); } }, [isLoading])esto hará que la búsqueda sea siempre que la condición sea verdadera.