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.

CodePudding user response：

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

    <SafeAreaView style={styles.container}>
      <FlatList
        data={data}
        renderItem={({ item }) => (
            <Text style={styles.item}>{item?.name}</Text>
        )}
        keyExtractor = (item, index) => item.id;
      />
    </SafeAreaView>
  );

And don't forget to add keyExtractor

CodePudding user response：

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