I am having following code:
import { StyleSheet, View, Text } from 'react-native'; import React, { useState, useEffect } from 'react'; const App = () => { const [articles, setArticles] = useState([]); const [loading, setLoading ] = useState(false); setArticles([{"flight_number":110," ...]) useEffect(()=>{ setLoading(true); var requestOptions = { method: 'GET', redirect: 'follow' }; fetch("https://api.spacexdata.com/v3/launches/upcoming", requestOptions) .then(response => response.text()) //.then(setArticles(response => result)) .then(result => console.log(result)) .catch(error => console.log('error', error)); setLoading(false); } , []); if (loading){ return <></> } else { return <HomeScreen articles = { articles }/> } }; const HomeScreen = (props) => { console.log("articles: ", props.articles); return ( <View> { props.articles.map((article, index)=>{ return <Text key = {index}> { article.mission_name } </Text> }) } </View> ); } export default App;
I am trying to call the setArticles causes the Too many re-renders. React limits the number of renders to prevent an infinite loop
This error is located at: in App (created by ExpoRoot) in ExpoRoot (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39) …
Advertisement
Answer
Below is the working code. Made some changes in the fetch method and UseSate method.
Rendering was wrong
setArticles([{"flight_number":110," ...])"
.
And to have the response to be loaded into the View tag, the JSON response needs to be parsed before using it. import { StyleSheet, View, Text } from 'react-native'; import React, { useState, useEffect } from 'react'; const App = () => { const [articles, setArticles] = useState([{"flight_number":110}]); const [loading, setLoading ] = useState(false); useEffect(()=>{ setLoading(true); var requestOptions = { method: 'GET', redirect: 'follow' }; fetch("https://api.spacexdata.com/v3/launches/upcoming", requestOptions) .then(response => response.text()) //.then(setArticles(response => result)) .then(result => setArticles(JSON.parse(result))) .catch(error => console.log('error', error)); setLoading(false); } , []); if (loading){ return <></> } else { return <HomeScreen articles = { articles }/> } }; const HomeScreen = (props) => { console.log("articles: ", props.articles.length); return ( <View> { props.articles.map((article, index)=>{ return <Text key = {index}> { article.mission_name } </Text> }) } </View> ); } export default App;