Tengo este componente muy simple llamado Editor :
export default function Editor() { const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [currentData, setCurrentData] = useState({}); useEffect(() => { fetch("http://localhost:4000/pages") .then(res => res.json()) .then( (result) => { setIsLoaded(true); setCurrentData(result); }, (error) => { setIsLoaded(true); setError(error); } ) }, []) if (error) { return ( <LoadingError value={error.message} /> ); } else if (!isLoaded) { return ( <Loading /> ) } else { console.log(currentData); } return ( <div></div> ); } Observe la última condición else , donde my currentData se registra en la consola.
¡Lo que sucede cuando se procesa este componente es que mi console.log() se dispara dos veces! La primera vez que mi objeto currentData está vacío. La segunda vez, el objeto contiene correctamente todos los datos de mi API.
Sin embargo, como mi console.log() debe activarse solo cuando no hay error (el primero if una condición), y solo cuando los datos están cargados (el segundo else if una condición), ¿cómo es posible que termine con un objeto vacío? en la consola la primera vez? ¿Qué estoy haciendo mal?
Su useEffect solo se dispara una vez. Estás viendo el resultado de console.log dos veces porque estás haciendo updateState dos veces. Cambie el orden para ver el comportamiento esperado que está buscando
Esto es lo que está pasando ahora mismo:
setIsLoaded(true); // Causes 1st rerender and so console.log executes with [] setCurrentData(result); // Causes second rerender and console.log has data.Lo que quieras:
setCurrentData(result); // Causes 1st rerender but does not reach the else statement setIsLoaded(true); // Reaches the else statement and currentData is already set Esto asegurará que sus datos actuales se establezcan antes de que isLoaded se establezca en true
A partir de ahora, React no actualiza por lotes las llamadas de estado en el escenario anterior, pero esto cambiará una vez que se lance React v18.
¿Por qué el useEffect() de este React se dispara dos veces después de cargarlo?
no lo hace
El Editor de funciones se ejecuta nuevamente porque llama a setIsLoaded y setCurrentData una vez que se resuelve la promesa en el efecto (que se ejecuta solo una vez).
Tengo la sensación de que React solo procesa actualizaciones de estado por lotes para ciertos controladores, como onClick y otros, pero tengo la sensación de que cuando se producen actualizaciones de estado en la devolución de llamada de una promesa, no se procesan por lotes, por lo que tendrá dos renderizaciones en su caso. .
editar, que es probablemente a lo que se refiere la respuesta de @ Harkunwar, en el sentido de que el orden en que actualiza su estado es importante