Estoy creando una aplicación nativa de reacción y necesito obtener algunos datos (artículos) de un servidor GraphQL y luego, enumerar los artículos.
Mi problema es que, cuando ejecuto mi aplicación, la primera vez que se procesa mi componente HomeScreen, el estado está vacío y no puedo ver ninguno de los artículos porque la respuesta del servidor tarda un tiempo en cargarse.
Traté de usar una condición en la que compruebo si la respuesta no tiene errores y ha terminado de cargarse, luego guardo los artículos en el hijo del estado cuando renderizo mi lista de artículos, el estado puede tener los artículos, pero arroja un error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
Todo lo que necesito es tener un estado inicial en mi aplicación antes de renderizar mi componente de inicio
Mi código:
const HomeScreen = () => { const {loading, error, data} = useQuery(queryRepository.GET_ARTICLES); const [articles, setArticles] = useState([]); const filterByCategory = name => { setArticles(CategoryService.filterByCategoryName(name, data.items)); }; if (loading) { return <Spinner />; } else if (error) { return <Error>{error}</Error>; } else { setArticles(data.items); } return ( <View style={globalStyles.container}> <View> <View style={globalStyles.categoryMenuContainer}> <CategoryMenu filterByCategory={filterByCategory} /> </View> <View style={globalStyles.reviewsContainer}> <ArticleList articles={articles} /> </View> </View> </View> ); };Pruebe useEffect para establecer el estado.
const HomeScreen = () => { const { loading, error, data } = useQuery(queryRepository.GET_ARTICLES); const [articles, setArticles] = useState([]); const filterByCategory = name => { setArticles(CategoryService.filterByCategoryName(name, data.items)); }; useEffect(() => { if (!loading && !error && data) { setArticles(data.items); } }, [data, loading, error]); if (error) { return <Error>{error}</Error>; } if (loading) { return <Spinner />; } return ( <View style={globalStyles.container}> <View> <View style={globalStyles.categoryMenuContainer}> <CategoryMenu filterByCategory={filterByCategory} /> </View> <View style={globalStyles.reviewsContainer}> <ArticleList articles={articles} /> </View> </View> </View> ) };Cada vez que llame a setArticles , se producirá un nuevo renderizado en su componente, por lo que no debe usar setters dentro de la función de renderizado en sí, debe usar hook useEffect para eso