Question

当尝试将mongodb中的JSON数据带入React Native Application屏幕时出现此错误。屏幕显示，仅无数据。错误出现在代码下方。这是一个简单的hello world应用程序，我试图将mongodb中的一些json数据引入屏幕。我只是不确定安装正确，尽管我确实可以看到屏幕来选择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,
  },
});

src 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

)

Answer 1

解决这个问题的方法很简单。我最终进行了一些搜索，但是找到了解决方法。我可以使用10.0.2.2，而不是使用localhost。这样可以解决网络错误，但是，我确实有一个数据未定义错误。

React Native：Json没有显示在屏幕上：控制台出现错误

1 个答案: