Hola chicos, soy casi nuevo en reaccionar nativo, he estado trabajando en Unity, Asp.net y WinForms anteriormente y, por lo tanto, mi forma de pensar sobre reaccionar es bastante sesgada en función de mi experiencia. Tengo a continuación una jerarquía de componentes:

• Pestaña de búsqueda (componente de clase):

   -- Search Component -- Carousel -- Popular searches -- Search results(Fetched on Search component keyword)

He implementado todos los subcomponentes como componentes funcionales y todos ellos obtienen datos en el gancho Useffect y usan redux store ( usando la función de conexión ).

Los datos se obtienen correctamente, pero el componente se representa parcialmente, todo lo estático se representa, pero la parte FlatList no se representa hasta que presiono ctrl+s.

Me enfrento al problema de "FlatList not rendered", pero también tengo una pregunta: "¿Lo estoy haciendo de la manera correcta?" o "¿Quién debería asumir la responsabilidad de obtener datos de la API, un contenedor o un niño?"

Gracias de antemano, código de ejemplo:

 const [popularSearhesList, setPopularSearhesList] = useState([]); const [extraData, setExtraData] = React.useState(new Date()) const token = useSelector(state => state.auth.token) useEffect(() => { async function fetchPopularEvents() { if (props.getPopularSearches != undefined && popularSearhesList.length==0) { props.getPopularSearches(token).then(() => { if (props.dashboardData.PopularSearches != undefined) { setPopularSearhesList(props.dashboardData.PopularSearches); setExtraData(new Date()); } }).catch((error) => { console.log(error); }); } else { console.log("props.getPopularSearches is undefined"); } setIsLoading(false); } fetchPopularEvents(); }, [])