React Native - 从 api 渲染数据时“未定义不是对象”

Question

I am making an application that takes data from API and displays it on the screen. When the screen is rendered it gives the following error: Render Error undefined is not an object (evaluating 'this.text'). funny thing is nothing like 'this.text' is in any of my screens except for a file in node modules. Anyway, here is the file

the screen that renders the data:

 /* 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;

i'd truly appretiate any input, im kinda new to this.

Answer 1

I think your data array is empty 1st time before API fetch and Text inside your FlatList is trying to fetch so provide null checking by "?"like item?.name

Answer 2

so after some research i found out it was because the call for the api in the effect hook was a function. and you need parenthesis for functions. Also, the reason it showed this.text was because it was under the json parser. so to the part you've been waiting for

the code:

 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([]);

i hope this finds who needs it