Entonces, comencé a estudiar React haciendo componentes de clase. Ahí, hasta donde entendí lo que estaba haciendo, si tuviera un
this.state = { isLoading: false, dataToRender: [], } this.setState({ isLoading: true }, async () => { const data = await fetchData(); this.setState({ dataToRender: data , isLoading: false }); }) const message => <p>loading...</p> if (isLoading) return message(); return ( dataToRender.map )para mostrar un mensaje de "carga" cada vez que llamo a una API para obtener nuevos datos, podría saber que la "cola" setState se ejecutaría en un orden. El setState externo recibiría un primer cambio de estado en el primer parámetro y una función para ejecutar inmediatamente después como segundo parámetro.
El problema es que tengo un poco de dificultad para comprender las formas de lograr esto con ganchos. asumo haciendo
const [isLoading, setIsLoading] = useState(false); const [data, setData] = useState([]); setLoading(async () => { setLoading(true) const data = await fetchData() setData(data); return false; })no funcionaria verdad? Siento que la lógica general de construir este tipo de lógica de componentes puede ser diferente cuando se usan ganchos de alguna manera... Si alguien pudiera al menos señalarme la dirección del concepto, sería bueno. ¡Gracias! :)
No hay devolución de llamada con la función de envío de useState .
const fn = async () => { setIsLoading(true) const data = await fetchData() setData(data) setIsLoading(false) }) La función anterior normalmente se invoca en un evento como onClick o useEffect .
Las funciones pasadas como una función de actualización de estado useState se tratan como funciones sincrónicas, por lo que está guardando efectivamente el objeto Promise devuelto implícitamente en el estado.
Lo que debe hacer es tener en cuenta la lógica asíncrona en una función que se llama desde un controlador de eventos, como onClick , o se llama en un ciclo de vida de componente, como useEffect .
const [isLoading, setIsLoading] = useState(false); const [data, setData] = useState([]); const asyncCall = async () => { setLoading(true); try { const data = await fetchData(); setData(data); } catch(error) { // handle any errors, logging, etc... } finally { setLoading(false); } }; Esto llamará/pondrá en cola cada actualización de estado en el orden en que se ponen en cola. También debe rodear cualquier lógica asíncrona en un bloque de try/catch para que pueda manejar cualquier promesa rechazada, borre el estado de carga finally para que, independientemente de las promesas resueltas/rechazadas, cuando el código se complete, restablezca el estado de carga.
dependiendo de Kent, React normalmente procesa por lotes estas llamadas para que solo obtenga una sola representación, pero no puede hacer esto en una devolución de llamada asíncrona (como nuestra promesa de éxito y controladores de errores). Puede usar el objeto para el valor de useState o usar useReducer.
const [state,setState]=useState({isLoading:false,success:false,isError:false,data:[]})luego establecer esas propiedades en cada estado.