Estoy creando una aplicación que toma datos de la API y los muestra en la pantalla. Cuando se procesa la pantalla, da el siguiente error: Render Error undefined no es un objeto (evaluando 'this.text'). lo curioso no es nada como 'this.text' está en ninguna de mis pantallas, excepto por un archivo en los módulos de nodo. De todos modos, aquí está el archivo.
la pantalla que representa los datos:
/* the screen that renders the data */ import React, {useEffect, useState} from 'react'; import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native'; const Experts = () => { useEffect(()=> { fetch('http://icantputtheactualurlcuzitsmyipaddress.com/expertsList/',{ method: 'GET' }) .then(resp => resp.json) .then(data => { setData(data) }) .catch(error => console.log('something is not suppose to be happening')) }, []) const [data, setData] = useState([]); return ( <SafeAreaView style={styles.container}> <FlatList data={data} renderItem={({ item }) => ( <Text style={styles.item}>{item.name}</Text> )} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, marginTop: StatusBar.currentHeight || 0, }, item: { backgroundColor: 'teal', padding: 20, marginVertical: 8, marginHorizontal: 16, color: 'white', }, title: { fontSize: 32, }, }); export default Experts;Realmente agradecería cualquier aporte, soy un poco nuevo en esto.
Creo que su matriz de datos está vacía la primera vez antes de la búsqueda de API y el texto dentro de su FlatList está tratando de buscar, así que proporcione una verificación nula con "?" ¿Te gusta el artículo? .nombre
<SafeAreaView style={styles.container}> <FlatList data={data} renderItem={({ item }) => ( <Text style={styles.item}>{item?.name}</Text> )} keyExtractor = (item, index) => item.id; /> </SafeAreaView> );Y no olvides agregar keyExtractor
Entonces, después de investigar un poco, descubrí que se debía a que la llamada a la API en el gancho de efectos era una función. y necesitas paréntesis para las funciones. Además, la razón por la que mostró this.text fue porque estaba bajo el analizador json. así que a la parte que has estado esperando
el código:
useEffect(()=> { fetch('http://skrskr.com/api/experts/',{ method: 'GET' }) /* make sure to put the needed parenthesis */ .then((resp) => resp.json()) .then( (json) => setData(json) ) .catch(error => console.log('something is not suppose to be happening')) }, []) const [data, setData] = useState([]);espero que esto encuentre a quien lo necesite