React Native：Json 未显示在屏幕中：在控制台中出现错误答案

【问题标题】：React Native: Json not showing in Screen: Getting Error in ConsoleReact Native：Json 未显示在屏幕中：在控制台中出现错误
【发布时间】：2020-04-11 21:12:34
【问题描述】：

尝试将 JSON 数据从 mongodb 导入 React Native 应用程序的屏幕时出现此错误。屏幕显示，只是没有数据。错误代码如下。这是一个简单的 hello world 应用程序，我正在尝试将一些 json 数据从 mongodb 引入屏幕。我只是不确定正确的设置，尽管我确实可以看到屏幕来选择您在 Listings.js 文件中的列表。由于某种原因，网络无法正常工作。不确定我是否需要在 package.json 中代理？

App.js

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Listings} from './src/Listings';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={{flex: 1}}>
        <Text style={styles.welcome}>Air BNB Data Screen</Text>
        <View style={{flex: 1, borderWidth: 3, borderColor: 'blue'}}>
          <Listings></Listings>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

源代码 Listings.js

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

export class Listings extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      show: true,
    };
  }

  componentDidMount = () => {
    const options = {
      headers: {'Content-Type': 'application/json'},
    };
    axios
      .get('http://localhost:8080/api/Listings/10006546', options)
      .then((response) => {
        this.setState({
          data: [],
        });
        console.log(data)

      })
      .catch((error) => {
        console.log(error);
      });
  };

  renderRow = ({item}) => {
    return (
      <View containerStyle={{ elevation: 1, borderRadius: 15 }}>
          <View row>
              <View flex={2}>
                  <Text h4>{item._id}</Text>
              </View>
          </View>
      </View>
    )
}
render() {

  return (

        <View style={styles.container}>
            <Text h3 style={{ marginLeft: 10 }}>Choose your Listing!</Text>
            <View>
                <FlatList
                    style={{ marginHorizontal: 10, marginTop: 10 }}
                    data={this.state.data}
                    renderItem={this.renderRow}
                    keyExtractor={(item, index) => item._id}
                />
            </View>
        </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    fontSize: 12,
    textAlign: 'center',
    margin: 5,
  },
});

控制台错误 - 这是我在控制台中收到的错误。

Error: Network Error at createError (C:\Users\dr460\reactnativeprojects\FirstApp\node_modules\axios\lib\core\createError.js:16)
        at EventTarget.handleError (C:\Users\dr460\reactnativeprojects\FirstApp\node_modules\axios\lib\adapters\xhr.js:83)
        at EventTarget.dispatchEvent (C:\Users\dr460\reactnativeprojects\FirstApp\node_modules\event-target-shim\dist\event-target-shim.js:818)
        at EventTarget.setReadyState (C:\Users\dr460\reactnativeprojects\FirstApp\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:575)
        at EventTarget.__didCompleteResponse (C:\Users\dr460\reactnativeprojects\FirstApp\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:389)
        at C:\Users\dr460\reactnativeprojects\FirstApp\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:502
        at RCTDeviceEventEmitter.emit (C:\Users\dr460\reactnativeprojects\FirstApp\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189)
        at MessageQueue.__callFunction (C:\Users\dr460\reactnativeprojects\FirstApp\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425)
        at C:\Users\dr460\reactnativeprojects\FirstApp\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112
        at MessageQueue.__guard (C:\Users\dr460\reactnativeprojects\FirstApp\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373

)

【问题讨论】：

标签： javascript json mongodb react-native

【解决方案1】：

解决这个问题的方法相当简单。我最终做了一些搜索，但我找到了解决办法。我可以使用 10.0.2.2 而不是使用 localhost。这修复了网络错误，但是，我现在确实有一个数据未定义错误。

【讨论】：