如何使用 axios 在 React Native 中获取数据答案

【问题标题】：How to fetch data in React native using axios如何使用 axios 在 React Native 中获取数据
【发布时间】：2019-12-21 19:22:52
【问题描述】：

我正在尝试使用 React Native 中的“Axios”从我的 localhost 服务器上的 API 获取数据，但未从 API 获取数据并在模拟器。

这是我的代码：


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

/> );}}

这是api数据

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

【问题讨论】：

您的 url 并没有真正指向您的本地服务器。您的网址中的“IP 地址”是什么？
我电脑的IP地址

标签： reactjs react-native axios

【解决方案1】：

你需要更新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)
   }
}

【讨论】：

TypeError: undefined is not an object (evaluating 'allRowIDs.length') 它在 ListView 的 dataSource={this.state.dataSource} 中显示此错误
因为这取决于您获得的数据...与我分享dataSource
我在问题中分享它
什么是ListView？分享给我，也许问题出在那儿
好的。这是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>} />

【解决方案2】：

在您的州定义数据源

     this.state = {

      dataSource: null,

    }

从 API 获取数据后更新状态

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

【讨论】：

抱歉，它不起作用。给出相同的结果“加载指示器”

【解决方案3】：

好的，我这样做解决了我的问题-

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

【讨论】：