Estoy moviendo una aplicación React de clase a componentes funcionales donde tiene sentido, sin embargo, tengo un pequeño problema con el useContext
, o quizás solo con la API de contexto en general.
Mi aplicación admite estados autenticados y no autenticados. Para los usuarios autenticados, me gustaría hacer una llamada a la API que devuelva los detalles de los elementos que poseen y los presente en una tabla. Debido a que esta lista es razonablemente estática, me gustaría almacenarla en contexto y pasarla a los componentes secundarios que mostrarán diferentes vistas de esos datos. No quiero volver a esa API para diferentes componentes. Los usuarios autenticados y los usuarios no autenticados también podrán ver los elementos que poseen otras personas visitando sus páginas/rutas, por ejemplo, usuario/uno, usuario/dos. Creo que estos datos se almacenarán en el estado del componente.
Tengo un stackblitz en https://stackblitz.com/edit/react-jvmryf que muestra lo que estoy haciendo.
Creé un contexto ( UserContext
) que se comparte con los componentes secundarios e, idealmente, me gustaría que el valor de UserContext.data
proporcione el valor de la tabla, pero parece que cuando se representa el componente, los datos no están disponibles. Esto es visible en los registros de la consola donde HERE IS USERCONTEXT {"name":"alice","age":30,"data":{}}
se imprime varias veces, antes de que finalmente se imprima con el objeto de datos que se completa. Actualmente, el componente NewTable
obtiene datos para la tabla a través de una llamada API en el componente para que pueda ver cómo debería verse la tabla.
Realmente agradecería consejos sobre si estoy haciendo la llamada API y configurando Contexto en el lugar correcto, y cómo debería representar esos datos en componentes secundarios (en este caso específico, NewTable, aunque habrá otros componentes en el futuro) .
Su contexto no está disponible porque fetchUser
se ejecuta de forma asincrónica y no se ha completado cuando se procesa NewTable
. No sé qué significa "si estoy haciendo la llamada API y configurando Contexto en el mismo lugar", pero el enfoque que está tomando es viable.
Si no desea representar esa tabla antes de que se carguen los datos, un enfoque común es agregar un estado mental de "carga" a su contexto compartido para señalar a los componentes secundarios que los datos no están listos. Puede mostrar algo de "se está cargando" o una barra de progreso o algo así hasta que los datos se carguen.