Tengo los siguientes datos JSON que se devuelven desde un punto final a través de una llamada fetch():
[{"username":"\"Hyh\"","name":"GitHub","url_main":"https://www.github.com/","url_user":"","exists":"Illegal","http_status":"","response_time_s":"0.1234"},{"username":"\"Hyh\"","name":"GitLab","url_main":"https://gitlab.com/","url_user":"https://gitlab.com/\"Hyh\"","exists":"Available","http_status":"200","response_time_s":"0.14287607499954902"}]Estoy tratando de mostrarlo así:
import React, { useState, useEffect } from "react"; import { View, FlatList, ActivityIndicator, StyleSheet, Text, SafeAreaView, } from "react-native"; const Results = ({ route, navigation }) => { const { owner } = route.params; const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const fetchData = async () => { const resp = await fetch( "https://endpoint.com/search?user=" + JSON.stringify(owner.text) ); const data = await resp.json(); setData(JSON.stringify(data)); setLoading(false); }; useEffect(() => { fetchData(); }, []); const Item = ({ url }) => ( <View> <Text>{url}</Text> </View> ); const renderItem = ({ item }) => <Item url={item.url_main} />; return ( <View> {loading ? ( <ActivityIndicator style={styles.loader} size="large" color="#7a16e4" /> ) : ( <SafeAreaView> <FlatList data={data} renderItem={renderItem} keyExtractor={(item) => item.response_time_s} /> </SafeAreaView> )} </View> ); };¿Alguna idea de por qué no aparece nada en mi pantalla? Intenté reemplazar mi JSON con los datos de JSON aquí: https://reactnative.dev/docs/flatlist y funcionó. He confirmado las devoluciones de datos de la búsqueda a través de console.log(data).
setData(JSON.stringify(data)); convierte el objeto en una cadena y lo pasa a la propiedad de data en FlatList, lo cual no es correcto. la propiedad data debe ser una matriz
https://reactnative.dev/docs/flatlist#datos-requeridos
Su código debería verse así
setData(data);