Así que tengo 3 componentes que se supone que deben renderizarse dentro de un componente de soporte. El tercer componente se basa en el trabajo realizado en el segundo componente y el segundo componente se basa en el trabajo realizado en el primer componente. Ambos leen y escriben de forma asíncrona desde una base de datos firebase firestore, lo que obviamente presenta un problema. Tengo problemas porque el segundo componente intenta acceder a algo de la base de datos que aún no existe, porque el primer componente lo agrega.
Así es como tengo los componentes configurados:
<React.Fragment> <div className="flex"> <GroupPreferences /> <SetupDatabase gId={groupID} /> <Restaurants gId={groupID} user={user} history={history} /> </div> </React.Fragment>El trabajo realizado en los componentes se basa en ganchos, donde el primer componente usa UseEffect() y los otros dos usan ComponentDidMount(). Necesito esperar de alguna manera a que termine todo el trabajo de la base de datos en GroupPreferences antes de que SetupDatabase comience a procesarse.
Debe pasar funciones de devolución de llamada a cada componente secundario, cuando se realice la lógica interna, deben activar esa devolución de llamada, para que sepa que el componente secundario está listo.
Si solo necesita saber si los componentes se han renderizado, puede usar React.ref. si Ref.current tiene valor, los componentes están en la pantalla, si ref.current no tiene valor, aún no se ha renderizado