React Native 中没有数据显示在屏幕上
No Data presenting to screen in React Native
我正在尝试在 React Native 中做一个简单的第一个应用程序。我有一个简单的主屏幕，在 App.js 中带有按钮，点击按钮并显示数据。数据保存在 mongodb 中，springboot 用于 api。我有 spring boot 运行 并与邮递员进行了测试。这是工作。我将在 src 文件夹中放置 app.js、列表组件，然后是我尝试使用的 mongodb 数据片段。我只是不确定为什么数据没有显示在屏幕上。
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 {View, Button} from 'react-native';
import axios from 'axios';
export class Listings extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
listings: [],
};
}
getlistings = () => {
const options = {
headers: {'Content-Type':'application/json'}
}
axios.get('http://localhost:8080/api/Listings/10006546', options)
.then(response => response.data())
.then(json => {
console.log(json);
if (json.error) return false;
})
.catch(error => {
console.log(error);
});
};
render() {
return (
<View style={{flex: 1, borderWidth: 3, borderColor: 'yellow'}}>
<Button
style={{flex: 1, borderWidth: 3, borderColor: 'red'}}
title={'listings'}
onPress={()=>{this.getlistings()}}
/>
</View>
);
}
}
Mongodb - 这是邮递员 GET 请求
{
"_id": "10006546",
"listing_url": "https://www.airbnb.com/rooms/10006546",
"name": "Ribeira Charming Duplex",
"summary": "Fantastic duplex apartment with three bedrooms, located in the historic area of Porto, Ribeira (Cube) - UNESCO World Heritage Site. Centenary building fully rehabilitated, without losing their original character.",
"space": "Privileged views of the Douro River and Ribeira square, our apartment offers the perfect conditions to discover the history and the charm of Porto. Apartment comfortable, charming, romantic and cozy in the heart of Ribeira. Within walking distance of all the most emblematic places of the city of Porto. The apartment is fully equipped to host 8 people, with cooker, oven, washing machine, dishwasher, microwave, coffee machine (Nespresso) and kettle. The apartment is located in a very typical area of the city that allows to cross with the most picturesque population of the city, welcoming, genuine and happy people that fills the streets with his outspoken speech and contagious with your sincere generosity, wrapped in a only parochial spirit.",
"description": "Fantastic duplex apartment with three bedrooms, located in the historic area of Porto, Ribeira (Cube) - UNESCO World Heritage Site. Centenary building fully rehabilitated, without losing their original character. Privileged views of the Douro River and Ribeira square, our apartment offers the perfect conditions to discover the history and the charm of Porto. Apartment comfortable, charming, romantic and cozy in the heart of Ribeira. Within walking distance of all the most emblematic places of the city of Porto. The apartment is fully equipped to host 8 people, with cooker, oven, washing machine, dishwasher, microwave, coffee machine (Nespresso) and kettle. The apartment is located in a very typical area of the city that allows to cross with the most picturesque population of the city, welcoming, genuine and happy people that fills the streets with his outspoken speech and contagious with your sincere generosity, wrapped in a only parochial spirit. We are always available to help guests",
"neighborhood_overview": "In the neighborhood of the river, you can find several restaurants as varied flavors, but without forgetting the so traditional northern food. You can also find several bars and pubs to unwind after a day's visit to the magnificent Port. To enjoy the Douro River can board the boats that daily make the ride of six bridges. You can also embark towards Régua, Barca d'Alva, Pinhão, etc and enjoy the Douro Wine Region, World Heritage of Humanity. The Infante's house is a few meters and no doubt it deserves a visit. They abound grocery stores, bakeries, etc. to make your meals. Souvenir shop, wine cellars, etc. to bring some souvenirs.",
"notes": "Lose yourself in the narrow streets and staircases zone, have lunch in pubs and typical restaurants, and find the renovated cafes and shops in town. If you like exercise, rent a bicycle in the area and ride along the river to the sea, where it will enter beautiful beaches and terraces for everyone. The area is safe, find the bus stops 1min and metro line 5min. The bustling nightlife is a 10 min walk, where the streets are filled with people and entertainment for all. But Porto is much more than the historical center, here is modern museums, concert halls, clean and cared for beaches and surf all year round. Walk through the Ponte D. Luis and visit the different Caves of Port wine, where you will enjoy the famous port wine. Porto is a spoken city everywhere in the world as the best to be visited and savored by all ... natural beauty, culture, tradition, river, sea, beach, single people, typical food, and we are among those who best receive tourists, confirm! Come visit us and feel at ho",
"transit": "Transport: • Metro station and S. Bento railway 5min; • Bus stop a 50 meters; • Lift Guindais (Funicular) 50 meters; • Tuc Tuc-to get around the city; • Buses tourist; • Cycling through the marginal drive; • Cable car in Gaia, overlooking the Port (just cross the bridge).",
"access": "We are always available to help guests. The house is fully available to guests. We are always ready to assist guests. when possible we pick the guests at the airport. This service transfer have a cost per person. We will also have service \"meal at home\" with a diverse menu and the taste of each. Enjoy the moment!",
"interaction": "Cot - 10 € / night Dog - € 7,5 / night",
"house_rules": "Make the house your home...",
"property_type": "House",
"room_type": "Entire home/apt",
"bed_type": "Real Bed",
"minimum_nights": "2",
"maximum_nights": "30",
"cancellation_policy": "moderate",
"last_scraped": "2019-02-16T05:00:00.000+0000",
"calendar_last_scraped": "2019-02-16T05:00:00.000+0000",
"first_review": "2016-01-03T05:00:00.000+0000",
"last_review": "2019-01-20T05:00:00.000+0000",
"accommodates": 8,
"bedrooms": 3,
"beds": 5,
"number_of_reviews": 51,
"bathrooms": 1.0,
"amenities": [
"TV",
"Cable TV",
"Wifi",
"Kitchen",
"Paid parking off premises",
"Smoking allowed",
"Pets allowed",
"Buzzer/wireless intercom",
"Heating",
"Family/kid friendly",
"Washer",
"First aid kit",
"Fire extinguisher",
"Essentials",
"Hangers",
"Hair dryer",
"Iron",
"Pack ’n Play/travel crib",
"Room-darkening shades",
"Hot water",
"Bed linens",
"Extra pillows and blankets",
"Microwave",
"Coffee maker",
"Refrigerator",
"Dishwasher",
"Dishes and silverware",
"Cooking basics",
"Oven",
"Stove",
"Cleaning before checkout",
"Waterfront"
],
"price": 80.00,
"security_deposit": 200.00,
"cleaning_fee": 35.00,
"extra_people": 15.00,
"guests_included": 6,
"images": {
"thumbnail_url": "",
"medium_url": "",
"picture_url": "https://a0.muscache.com/im/pictures/e83e702f-ef49-40fb-8fa0-6512d7e26e9b.jpg?aki_policy=large",
"xl_picture_url": ""
}
在你的代码中你犯了两个错误。
1) 虽然你已经初始化状态"listings"，但你还没有将响应数据分配给列表状态。您可以按如下方式分配它。
getlistings = () => {
const options = {
headers: {'Content-Type':'application/json'}
}
axios.get('http://localhost:8080/api/Listings/10006546', options)
.then(response => {
this.setState({
listings:response.data()
});
})
.catch(error => {
console.log(error);
});
};
2) 您还没有编写任何方式（DOM 元素）来查看 listings 数组中的数据。例如：Table、列表等
希望以下 link 能帮助您了解如何在 React-Native
中显示 json 数组
https://www.reddit.com/r/reactnative/comments/bs0lzt/display_nested_json_array_data_within_flatlist/
我正在尝试在 React Native 中做一个简单的第一个应用程序。我有一个简单的主屏幕，在 App.js 中带有按钮，点击按钮并显示数据。数据保存在 mongodb 中，springboot 用于 api。我有 spring boot 运行 并与邮递员进行了测试。这是工作。我将在 src 文件夹中放置 app.js、列表组件，然后是我尝试使用的 mongodb 数据片段。我只是不确定为什么数据没有显示在屏幕上。
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 {View, Button} from 'react-native';
import axios from 'axios';
export class Listings extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
listings: [],
};
}
getlistings = () => {
const options = {
headers: {'Content-Type':'application/json'}
}
axios.get('http://localhost:8080/api/Listings/10006546', options)
.then(response => response.data())
.then(json => {
console.log(json);
if (json.error) return false;
})
.catch(error => {
console.log(error);
});
};
render() {
return (
<View style={{flex: 1, borderWidth: 3, borderColor: 'yellow'}}>
<Button
style={{flex: 1, borderWidth: 3, borderColor: 'red'}}
title={'listings'}
onPress={()=>{this.getlistings()}}
/>
</View>
);
}
}
Mongodb - 这是邮递员 GET 请求
{
"_id": "10006546",
"listing_url": "https://www.airbnb.com/rooms/10006546",
"name": "Ribeira Charming Duplex",
"summary": "Fantastic duplex apartment with three bedrooms, located in the historic area of Porto, Ribeira (Cube) - UNESCO World Heritage Site. Centenary building fully rehabilitated, without losing their original character.",
"space": "Privileged views of the Douro River and Ribeira square, our apartment offers the perfect conditions to discover the history and the charm of Porto. Apartment comfortable, charming, romantic and cozy in the heart of Ribeira. Within walking distance of all the most emblematic places of the city of Porto. The apartment is fully equipped to host 8 people, with cooker, oven, washing machine, dishwasher, microwave, coffee machine (Nespresso) and kettle. The apartment is located in a very typical area of the city that allows to cross with the most picturesque population of the city, welcoming, genuine and happy people that fills the streets with his outspoken speech and contagious with your sincere generosity, wrapped in a only parochial spirit.",
"description": "Fantastic duplex apartment with three bedrooms, located in the historic area of Porto, Ribeira (Cube) - UNESCO World Heritage Site. Centenary building fully rehabilitated, without losing their original character. Privileged views of the Douro River and Ribeira square, our apartment offers the perfect conditions to discover the history and the charm of Porto. Apartment comfortable, charming, romantic and cozy in the heart of Ribeira. Within walking distance of all the most emblematic places of the city of Porto. The apartment is fully equipped to host 8 people, with cooker, oven, washing machine, dishwasher, microwave, coffee machine (Nespresso) and kettle. The apartment is located in a very typical area of the city that allows to cross with the most picturesque population of the city, welcoming, genuine and happy people that fills the streets with his outspoken speech and contagious with your sincere generosity, wrapped in a only parochial spirit. We are always available to help guests",
"neighborhood_overview": "In the neighborhood of the river, you can find several restaurants as varied flavors, but without forgetting the so traditional northern food. You can also find several bars and pubs to unwind after a day's visit to the magnificent Port. To enjoy the Douro River can board the boats that daily make the ride of six bridges. You can also embark towards Régua, Barca d'Alva, Pinhão, etc and enjoy the Douro Wine Region, World Heritage of Humanity. The Infante's house is a few meters and no doubt it deserves a visit. They abound grocery stores, bakeries, etc. to make your meals. Souvenir shop, wine cellars, etc. to bring some souvenirs.",
"notes": "Lose yourself in the narrow streets and staircases zone, have lunch in pubs and typical restaurants, and find the renovated cafes and shops in town. If you like exercise, rent a bicycle in the area and ride along the river to the sea, where it will enter beautiful beaches and terraces for everyone. The area is safe, find the bus stops 1min and metro line 5min. The bustling nightlife is a 10 min walk, where the streets are filled with people and entertainment for all. But Porto is much more than the historical center, here is modern museums, concert halls, clean and cared for beaches and surf all year round. Walk through the Ponte D. Luis and visit the different Caves of Port wine, where you will enjoy the famous port wine. Porto is a spoken city everywhere in the world as the best to be visited and savored by all ... natural beauty, culture, tradition, river, sea, beach, single people, typical food, and we are among those who best receive tourists, confirm! Come visit us and feel at ho",
"transit": "Transport: • Metro station and S. Bento railway 5min; • Bus stop a 50 meters; • Lift Guindais (Funicular) 50 meters; • Tuc Tuc-to get around the city; • Buses tourist; • Cycling through the marginal drive; • Cable car in Gaia, overlooking the Port (just cross the bridge).",
"access": "We are always available to help guests. The house is fully available to guests. We are always ready to assist guests. when possible we pick the guests at the airport. This service transfer have a cost per person. We will also have service \"meal at home\" with a diverse menu and the taste of each. Enjoy the moment!",
"interaction": "Cot - 10 € / night Dog - € 7,5 / night",
"house_rules": "Make the house your home...",
"property_type": "House",
"room_type": "Entire home/apt",
"bed_type": "Real Bed",
"minimum_nights": "2",
"maximum_nights": "30",
"cancellation_policy": "moderate",
"last_scraped": "2019-02-16T05:00:00.000+0000",
"calendar_last_scraped": "2019-02-16T05:00:00.000+0000",
"first_review": "2016-01-03T05:00:00.000+0000",
"last_review": "2019-01-20T05:00:00.000+0000",
"accommodates": 8,
"bedrooms": 3,
"beds": 5,
"number_of_reviews": 51,
"bathrooms": 1.0,
"amenities": [
"TV",
"Cable TV",
"Wifi",
"Kitchen",
"Paid parking off premises",
"Smoking allowed",
"Pets allowed",
"Buzzer/wireless intercom",
"Heating",
"Family/kid friendly",
"Washer",
"First aid kit",
"Fire extinguisher",
"Essentials",
"Hangers",
"Hair dryer",
"Iron",
"Pack ’n Play/travel crib",
"Room-darkening shades",
"Hot water",
"Bed linens",
"Extra pillows and blankets",
"Microwave",
"Coffee maker",
"Refrigerator",
"Dishwasher",
"Dishes and silverware",
"Cooking basics",
"Oven",
"Stove",
"Cleaning before checkout",
"Waterfront"
],
"price": 80.00,
"security_deposit": 200.00,
"cleaning_fee": 35.00,
"extra_people": 15.00,
"guests_included": 6,
"images": {
"thumbnail_url": "",
"medium_url": "",
"picture_url": "https://a0.muscache.com/im/pictures/e83e702f-ef49-40fb-8fa0-6512d7e26e9b.jpg?aki_policy=large",
"xl_picture_url": ""
}
在你的代码中你犯了两个错误。
1) 虽然你已经初始化状态"listings"，但你还没有将响应数据分配给列表状态。您可以按如下方式分配它。
getlistings = () => {
const options = {
headers: {'Content-Type':'application/json'}
}
axios.get('http://localhost:8080/api/Listings/10006546', options)
.then(response => {
this.setState({
listings:response.data()
});
})
.catch(error => {
console.log(error);
});
};
2) 您还没有编写任何方式（DOM 元素）来查看 listings 数组中的数据。例如：Table、列表等
希望以下 link 能帮助您了解如何在 React-Native
中显示 json 数组https://www.reddit.com/r/reactnative/comments/bs0lzt/display_nested_json_array_data_within_flatlist/