Question 35303 in React native Question posted in
The official React Native documentation can be found here.

I can't get custom data from API in react native

ı am a beginner react native developer. I am trying to GET custom data with changing /name property at the URL. My getData() function is working without problem but when ı use getCustomData() ı am having an error. By the way, ı don’t think that ı implemented the API page right. So if you have any suggestions please give me a hand.

If you want to take a look at the repo,
https://github.com/OnurSerbes/country-api-app-react-native

The error

This is my main screen to dispaly API data

import {FlatList, StyleSheet, View} from "react-native"
import CountryItem from "../components/CountryItem"
import { useEffect, useState } from "react";
import { getCustomData, getData} from "../util/api";
import SearchBar from "react-native-dynamic-search-bar";



function CountriesOverviewScreen({navigation}){

    const [data, setData] = useState([]);
    const [changedData, setChangedData] = useState('');

    useEffect(()=>{
        getData(setData)
    }, []) 

    useEffect(()=>{
    if (changedData) {
          getCustomData(setData, changedData)
     }
  },[changedData])

    function renderCountryItem(itemData){

        function pressHandler(){
            navigation.navigate('CountriesDetail', {
                name: itemData.item.name,
                flag: itemData.item.flags.png,
                capital: itemData.item.capital,
                population: itemData.item.population,
                timezone: itemData.item.timezones,
                language: itemData.item.languages[0]['name'],
            })
        }
        return (
            <CountryItem
            onPress={pressHandler}
            title={itemData.item.name}
            imageUrl={itemData.item.flags.png}
            />   
        )
    }

    return  (
        <View style={styles.container}>
            <SearchBar
            placeholder="Search here"
            onSearchPress = {(text)=>{setChangedData(text)}}/>
            <FlatList
            style={styles.flatlist} 
            numColumns={2}
            data={data}
            renderItem={renderCountryItem}
            keyExtractor={(item, index) => String(index)}/>
        </View>
    )

}

export default CountriesOverviewScreen

const styles = StyleSheet.create({
    container:{
        marginTop: 15,
    },
    flatlist: {
        margin: 10,
    }
})

This is the api.js

import axios from "axios";

export const getData = async function(setData){
    await axios.get('https://restcountries.com/v2/all')
    .then((json)=> setData(json.data))
    .catch((e)=>{
        console.log(e)
    })
}

export const getCustomData = async function(setData, countryName){
    await axios.get(`https://restcountries.com/v2/name/${countryName}`)
    .then((json)=> setData(json.data))
    .catch((e)=>{
        console.log(e)
    }) 
}

EDIT:
ı am getting this after ı console.log(country name) in getCustomData
enter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    As you can see in the EDIT block ı logged the countryName and ı found that ı am not returning string, so ı changed the "SearchBar" components function.

    onChangeText={(text) => setChangedData(text)}
onSearchPress={() => getCustomData(setData, changedData)}

    and also ı take the getCustomData out from useEffect. I am just using it in SearchBar component


  2. 0

    It’s a 404 error which means you are accessing the resource which is not available on the server, also in your code there is a " . " missing before then

    export const getCustomData = async function(setData, countryName){
await axios.get(`https://restcountries.com/v2/name/${countryName}`)
then((json)=> setData(json))
.catch((e)=>{
    console.log(e)
}) 
}

    here add . before then, something like this

    export const getCustomData = async function(setData, countryName){
await axios.get(`https://restcountries.com/v2/name/${countryName}`)
.then((json)=> setData(json))
.catch((e)=>{
    console.log(e)
}) 
}
    Login or Signup to reply.
  3. 0

    the reason why is that happenning is that you are making an axios get request before the value of the useState has changed as it does not change directly.
    what you can do instead is:

    function CountriesOverviewScreen({navigation}){

    const [data, setData] = useState([]);
    const [changedData, setChangedData] = useState(null);

    useEffect(()=>{
        getData(setData)
    }, []) 

    useEffect(()=>{
    if (changedData!=null) {
        if(changedData[0]!=undefined){
          getCustomData(setData, changedData);
          }
     }
  },[changedData])

    function renderCountryItem(itemData){

        function pressHandler(){
            navigation.navigate('CountriesDetail', {
                name: itemData.item.name,
                flag: itemData.item.flags.png,
                capital: itemData.item.capital,
                population: itemData.item.population,
                timezone: itemData.item.timezones,
                language: itemData.item.languages[0]['name'],
            })
        }
        return (
            <CountryItem
            onPress={pressHandler}
            title={itemData.item.name}
            imageUrl={itemData.item.flags.png}
            />   
        )
    }

    return  (
        <View style={styles.container}>
            <SearchBar
            placeholder="Search here"
            onSearchPress = {(text)=>{setChangedData([text])}}/>
            <FlatList
            style={styles.flatlist} 
            numColumns={2}
            data={data}
            renderItem={renderCountryItem}
            keyExtractor={(item, index) => String(index)}/>
        </View>
    )

}

    So the changes that I suggested is creating a search state, and it only makes an axios get if the search is true, (the data will be updated by that time as well in the useState)

    Edit:
    I removed the setSearch and added an if statement that checks if changedData is null, if not it proceeds to search when the value is not undefined

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search