Mi aplicación obtiene algunos datos de un servidor usando useEffect y los pasa como apoyo a un componente secundario. Me gustaría pausar la representación del componente secundario hasta que los datos se obtengan por completo y se carguen en un state . ¿Cómo puedo conseguir esto?
Mi código (simplificado):
const App = () => { const [data, setData] = useState(undefined) useEffect(async () => { const fetchedData = await getDataFromServer() setData(fetchedData) }, []) return ( <div> <ChildComponent data={data} /> // How to pause rendering until data != undefined? </div> ) }Puede lograr esto mediante el uso de un operador ternario, dado que undefined es un valor falso, la condición devolverá false y mostrará Loading... hasta que se obtengan los data y, una vez que termine de obtenerlos, la condición se volverá true ya data ya no son undefined , es decir, falsy , así es como los data se pasarán al componente secundario solo después de que se obtengan.
const App = () => { const [data, setData] = useState(undefined) useEffect(async () => { const fetchedData = await getDataFromServer() setData(fetchedData) }, []) return ( <div> {data ? <ChildComponent data={data} /> : <p>Loading...</p>} </div> ) } Más sobre valores falsy aquí
Más sobre el ternary operator en Javascript aquí