Intentando hacer un ejemplo simple de llamada API en reaccionar nativo, sin embargo, al ejecutar la aplicación, solo se muestra el mensaje "Cargando ..." en la pantalla y no mostrará la API.
import React, { useEffect, useState } from 'react'; import {StyleSheet, Flatlist, View, Text} from "react-native"; export default App = () => { const [isLoading, setLoading] = useState(true); const [data, setData]=useState([]); console.log(data); useEffect(() => { fetch('https://raw.githubusercontent.com/adhithiravi/React-Hooks-Examples/master/testAPI.json') .then((response) => response.json()) .then((json) => setData(json)) .catch((error) => console.log(error)) .finally(() => setLoading(false)); }, []); return( <View style={{flex:1,padding:24}}> {isLoading ? <Text>Loading...</Text>: (<View style={{flex:1, flexDirection: 'column',justifyContent: 'space-between'}}> <Text style={{fontSize:18,color:'green', textAlign:'center'}}>{data.title}</Text> <Text style={{fontSize:14, color:'green', textAlign:'center',paddingBottom:10}}>Heading:</Text> <FlatList data={data.articles} keyExtractor={({id},index) =>id} renderitem={({item}) => ( <Text>{item.id+'.' +item.title}</Text> )} /> </View> )} </View> ); };Intenté revisar el código y no puedo ver ningún problema. Tampoco hay ningún error que suba en la consola.
Hay algunos errores tipográficos, los resolví de la siguiente manera:
import React, { useEffect, useState } from "react"; import { StyleSheet, FlatList, View, Text } from "react-native"; const App = () => { const [isLoading, setLoading] = useState(true); const [data, setData] = useState([]); console.log(data); useEffect(() => { fetch( "https://raw.githubusercontent.com/adhithiravi/React-Hooks-Examples/master/testAPI.json" ) .then((response) => response.json()) .then((json) => { console.log(json) setData(json)}) .catch((error) => console.log(error)) .finally(() => setLoading(false)); }, []); return ( <View style={{ flex: 1, padding: 24 }}> {isLoading ? ( <Text>Loading...</Text> ) : ( <View style={{ flex: 1, flexDirection: "column", justifyContent: "space-between", }} > <Text style={{ fontSize: 18, color: "green", textAlign: "center" }}> {data.title} </Text> <Text style={{ fontSize: 14, color: "green", textAlign: "center", paddingBottom: 10, }} > Heading: </Text> <FlatList data={data.articles || []} keyExtractor={({ id }, index) => id} renderItem={({ item }) => <Text>{item.id + "." + item.title}</Text>} /> </View> )} </View> ); }; export default App;Vista previa de la demostración: https://snack.expo.dev/@emmbyiringiro/laughing-donut
Tienes algunos pequeños errores tipográficos. Arréglalos y estarás bien.
Original
import {StyleSheet, Flatlist, View, Text} from "react-native";aquí debe importarse como FlatList. Fíjate en la L mayúscula.
Fijado
import {StyleSheet, FlatList, View, Text} from "react-native";Original
renderitem={({item}) => ( <Text>{item.id+'.' +item.title}</Text> )}aquí en la primera línea, debería ser renderItem con una I mayúscula.
{"index": 1, "item": {"id": "2", "title": "GraphQL APIs FAQ"}, "separators": {"highlight": [Function highlight], "unhighlight": [Function unhighlight], "updateProps": [Function updateProps]}} {"index": 2, "item": {"id": "3", "title": "JavaScript 101"}, "separators": {"highlight": [Function highlight], "unhighlight": [Function unhighlight], "updateProps": [Function updateProps]}}Observe cómo se estructuran los datos entrantes. Los datos requeridos están dentro de un objeto separado llamado "elemento" dentro de un único "elemento". Entonces, para acceder a ellos, debe hacer lo siguiente.
Fijado
renderItem={item => ( <Text>{item.item.id+'.' +item.item.title}</Text> )}también podrías mejorar esta línea
keyExtractor={({id},index) =>id}con
keyExtractor={item => item.id}No hará nada visualmente. Pero código menor.