React Native: Json не отображается на экране: ошибка в консоли - PullRequest
0 голосов
/ 12 апреля 2020

Я получаю эту ошибку при попытке вывести JSON данные из mongodb на экран React Native Application. Экран показывает, просто нет данных. Ошибка ниже с кодом. Это простое приложение hello world, и я пытаюсь вывести на экран некоторые json данные из mongodb. Я просто не уверен в правильности настроек, хотя у меня действительно есть экран, чтобы выбрать ваш список в листингах. js файл. по какой-то причине сеть не работает. Не уверен, что мне нужен прокси в пакете. json?

Приложение. 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

)

1 Ответ

0 голосов
/ 12 апреля 2020

Решить это было довольно просто c. Я закончил поиск, но смог найти решение. Вместо использования localhost я смог использовать 10.0.2.2. Это исправило ошибку сети, однако, у меня есть данные, ошибка не определена.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...