CODEWITHSUNDEEP
reactjsreact-nativeaxios
serene
serene

Reputation: 1646

How to fetch data in React native using axios

I am trying to fetch data from API on my localhost server using "Axios" in React Native but data in not fetching from API and displaying "TypeError: undefined is not an object (evaluating 'allRowIDs.length')" in the emulator.

Here is my code:


import React, { Component } from 'react';
import { StyleSheet, ActivityIndicator, ListView, Text, View, Alert } from 'react-native';
import axios from 'axios';

export default class pageOne extends Component {

  constructor(props) {

    super(props);

     this.state = {
      isLoading: true,
    }

  }

  async componentDidMount(){
    try{
       await axios.post('http://192.168.38.230/reactTest/list.php')
       .then(response => {
             console.log(response);
             this.setState({isLoading: false, dataSource: response})})
       .catch(err => console.log(err));
    } catch(error){
        console.log('Fetch Error:', error)
    }
 }

  render() {
    if (this.state.isLoading) {
      return (
        <View>
          <ActivityIndicator />
        </View>
      );
    }

    return (


        <ListView

          dataSource={this.state.dataSource}

          renderSeparator= {this.ListViewItemSeparator}

          enableEmptySections = {true}

          renderRow={(rowData) => <Text style={styles.rowViewContainer} 
          onPress={this.GetItem.bind(this, rowData.cl_name)} >{rowData.cl_name}</Text>}

/> );}}

And this is api data

[{"id":"1","cl_name":"test11"},{"id":"2","cl_name":"test12"},{"id":"3","cl_name":"test13"},{"id":"4","cl_name":"test14"}]

Upvotes: 0

Views: 4402

Answers (3)

serene
serene

Reputation: 1646

Alright, I resolved my problem by doing so-

import React, { Component } from 'react'
import { StyleSheet, ActivityIndicator, ListView, Text, View, Alert } from 'react-native'
import axios from 'axios'

class axioslist extends Component {

  constructor(props) {
    super(props);
     this.state = {
      posts:[]
    }
  }

  componentDidMount(){
    axios.get('http://IP address/reactTest/list.php')
    .then(res => {
      console.log(res)
      this.setState({
        posts: res.data.slice(0,10)
      }) 
    })
 }

  render() {
    const { posts } = this.state;
    const postList = posts.length ? (
      posts.map(post =>
        {
          return(       
              <Text  key={post.id}>
                {post.cl_name} 
           </Text>
      )
        })
    ) : (<Text>No data yet.</Text>)

    return (

      <View>
       <Text>{postList} </Text>
      </View> );
    }}
      export default axioslist

Upvotes: 1

Idan
Idan

Reputation: 4023

You need to update isLoading 

async componentDidMount(){
   try{
      await axios.post('http://IP ADDRESS/reactTest/list.php')
      .then(response => {
            console.log(response);
            this.setState({isLoading: false, dataSource: response})})
      .catch(err => console.log(err));
   } catch(error){
       console.log('Fetch Error:', error)
   }
}

Upvotes: 1

Phoenix
Phoenix

Reputation: 36

  1. Define dataSource in your state

     this.state = {

      dataSource: null,

    }

  1. Update states after getting data from API

componentDidMount(){
   return axios.post('http://IP ADDRESS/reactTest/list.php')
   .then(response => this.setState({ dataSource: response, isLoading: false)
            .catch(err => console.log(err));
}

Upvotes: 1

Related Questions