How to fetch data in React native using axios

Question

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"}]

Your url is not really pointing to your local server. What is 'IP Address' in your url? — Shripada
– Shripada, Commented Aug 15, 2019 at 10:21

Phoenix · Accepted Answer · 2019-08-15 10:29:30Z

1

Define dataSource in your state

     this.state = {

      dataSource: null,

    }

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));
}

answered Aug 15, 2019 at 10:29

Phoenix

362 bronze badges

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

1 Comment

serene Over a year ago

Sorry, but it is not working. Giving the same result the "loading Indicator"

Idan · Accepted Answer · 2019-08-15 10:31:13Z

1

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)
   }
}

edited Aug 15, 2019 at 10:31

answered Aug 15, 2019 at 10:22

Idan

4,1531 gold badge33 silver badges34 bronze badges

11 Comments

serene Over a year ago

TypeError: undefined is not an object (evaluating 'allRowIDs.length') it is displaying this error in ListView's dataSource={this.state.dataSource}

Idan Over a year ago

because it depends on your data that you get...share with me the dataSource

serene Over a year ago

I share it in the question

Idan Over a year ago

what is ListView? Share with me, maybe the problem is there

serene Over a year ago

ok. this the ListView -

<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>}          />

|

serene · Accepted Answer · 2019-08-19 14:54:57Z

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

Collectives™ on Stack Overflow

How to fetch data in React native using axios

3 Answers 3

1 Comment

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related