Question

我是一个使用React-native的菜鸟，我试图让我的代码点击一个特定的API，然后显示返回的JSON信息，但由于某种原因，从这个api返回的JSON即使它从其他apis工作也不起作用。我已经苦苦挣扎了几天，我只是感到困惑。谁能告诉我我做错了什么？

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

export default class App extends Component {
  state = { data: [] };

  componentDidMount() {
  axios.get('https://dvlasearch.appspot.com/AccountInfo?apikey=DvlaSearchDemoAccount')
    .then(response => this.setState({ data: response.data }));
  }

  renderData() {
    return this.state.data.map(data => <Text>{data.client}</Text>);
  }

  render() {
    console.log(this.state);

    return (
      <View>
        {this.renderData()}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    marginTop: 15,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

Answer 1

在constructor(props)

中为您的州分配值

constructor(props)
{
    this.state = {
        data: []
    }
}

Answer 2

您正确地将状态变量“data”设置为数组

state = { data: [] };

但是，您调用的API不会返回数组数据，但它实际上是一个对象。因此，在获取之后，您基本上将数据数组转换为如下对象：

{
    "status":"success",
    "client":"Demo account",
    "usedCredits":31325,
    "totalCredits":1000000,
    ... more attributes
}

然后你尝试使用map函数渲染这个数据，好像它是一个数组，但你没有数组，所以map不是你可以使用的方法。

解决方案：将API中的正确数据设置为状态变量，并确保它是一个数组。

更新

根据您的评论，我了解您要打印对象数据，因为响应不会返回数组。我的建议是在您从API调用中获取数据时将数据处理到数组：

componentDidMount() {
    axios.get('https://dvlasearch.appspot.com/AccountInfo?apikey=DvlaSearchDemoAccount')
        .then(response => {
            let details = [];

            for (var i in response.data) {
                details.push({ name: i, value: response.data[i] })
            }

            this.setState({ data: details })
        });
}

然后使用map函数简单地渲染它们：

render() {
    console.log(this.state);

    return (
      <View>
        {
          this.state.data.map(item => {
            return <Text>{item.name} - {item.value}</Text>
          })
        }
      </View>
    );
  }

当然，您需要根据需要进行调整

Answer 3

您可以将componentDidMount用于componentWillMount

componentWillMount() {
  axios.get('https://dvlasearch.appspot.com/AccountInfo?apikey=DvlaSearchDemoAccount')
    .then(response => this.setState({ data: response.data }));
  }

TypeError：this.state.data.map不是函数

3 个答案: