Empty Array Trying to Render Data in React Native

Question

I am writing a react native app. I am able to understand how to retrieve data from api data by using axios or fetch. But I am having trouble. I am trying to use my token I passed from the previous class and use that to fetch a new api and data. I am able to connect to the server and I connected fine in POSTMAN. But when I look in my log from terminal in Visual Studio. I get am empty array. I get array = []. But I know that is is supposed to show data.

async componentDidMount(){
try {
  const savedProfile = await AsyncStorage.getItem('userData');
  const profile = JSON.parse(savedProfile);
  const token = profile.token;
  console.log(token);
  const email = profile.user_email;
  const name = profile.user_nicename;
  fetch(url, {
    method: 'GET',
    headers:{
      Accept: 'application/json',
               'Content-Type': 'application/json',
       },
           Authorization: "Bearer " + token,
  })
  .then(response => response.json())
  .then(response => console.log(response));
} catch (err) {
  console.warn(err);
}
};

I believe the issue might be in render as with the other posts on this site that I read. I looked at the documentation on the react website too but I may need a little more help. What I was trying to do first was just to print the data in the console. I filled my page with dummy data. But if possible I was hoping to fill my table with a specific part of the json data. Basically fetching address and this is an example.

"address": "4060 18th Ave NE, Naples, Florida, USA",

The rest of my render looks like this. But I am hoping to at least show the data in the console so I can go from there.

render() {
return (
  <View>
    <Header
      centerComponent={{ text: 'Schedule', style: { color: '#fff' } }}
      containerStyle={{
        backgroundColor: '#000000',
        justifyContent: 'space-around',
      }}
    />
    <FlatList
      data={[
        {key: 'Devin'},
        {key: 'Dan'},
        {key: 'Dominic'},
        {key: 'Jackson'},
        {key: 'James'},
        {key: 'Joel'},
        {key: 'John'},
        {key: 'Jillian'},
        {key: 'Jimmy'},
        {key: 'Julie'},
      ]}
      renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
    />
  </View>
);
}

@Saadi const url = 'ec2-18-223-87-78.us-east-2.compute.amazonaws.com/wp-json/ha-api/… this requires a token to work by a get request. — xRose1
– xRose1, Commented Nov 14, 2019 at 4:26
@Saadi No. I get a successful connection. Response 201. Which is ok. But I do not get any catch errors or problems. I get my token in console and the empty array and that is all. — xRose1
– xRose1, Commented Nov 14, 2019 at 4:34
If you execute the link in a browser, it gives you empty array, which means it was successful even if there was no token. Make sure you return error on the server if no token is passed for the fetch to properly work. Secondly log the values of token and make sure that its not empty or expired. — Saadi
– Saadi, Commented Nov 14, 2019 at 4:37

Saadi · Accepted Answer · 2019-11-14 18:34:01Z

1

Pass the header parameters in the correct format as below:

headers: { 
   'Accept': 'application/json', 
   'Content-Type': 'application/json', 
   'Authorization': 'Bearer ' + token, 
 }

answered Nov 14, 2019 at 18:34

Saadi

1,29414 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Empty Array Trying to Render Data in React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related