javascript - React Native - 使用两个不同的获取请求导航两个屏幕
问题描述
我是反应原生的新手。我正在创建一个包含食物类别按钮的平面列表,一旦单击类别按钮,将显示第二个页面,其中包含一种食物,具体取决于用户单击的类别按钮。
类别按钮的名称是从我的数据库中加载的,所以我可以获取它。现在,正如我所说,一旦单击按钮,我必须显示第二页。
我已经完成了一个代码,其中有两种获取请求,用于在按钮中显示我的类别名称并使用另一个获取导航到第二页。
问题是; 单击类别按钮后,我的按钮将不会显示任何第二页。
这是我的代码
类别.js
import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity
} from 'react-native';
var screen = Dimensions.get('window');*/
export default class Categories extends Component {
static navigationOptions = {
title: 'Product2'
};
state = {
data: [],
};
fetchData = async() => {
const response_Cat = await fetch('http://192.168.254.102:3307/Categories/');
const category_Cat = await response_Cat.json();
this.setState({data: category_Cat});
};
componentDidMount() {
this.fetchData();
};
FoodCat = async() => {
const { params } = this.props.navigation.navigate('state');
const response_Food = await fetch('http://192.168.254.102:3307/foods/' + params.id);
const food_Food = await response_Food.json();
this.setState({data: food_Food});
};
componentDidCatch() {
this.FoodCat();
};
render() {
const { navigate } = this.props.navigation;
const { params } = this.props.navigation.navigate('state');
return (
<View style = { styles.container }>
<FlatList
data = { this.state.data }
renderItem = {({ item }) =>
<TouchableOpacity style = {styles.buttonContainer}>
<Text style = {styles.buttonText}
onPress = { () => navigate('FoodCat', { id: item.id }) }>{ item.cat_name }</Text>
</TouchableOpacity>
}
keyExtractor={(x,i) => i}
/>
</View>
);
}
}
AppRegistry.registerComponent('Categories', () => Categories);
详细信息.js
import React, {Component} from 'react';
import { AppRegistry, StyleSheet,
FlatList, Text, View }
from 'react-native';
export default class Details extends Component {
constructor() {
super()
this.state = {
dataSource: []
}
}
renderItem = ({ item }) => {
return (
<View style = {{flex: 1, flexDirection: 'row'}}>
<View style = {{flex: 1, justifyContent: 'center'}}>
<Text>
{item.menu_desc}
</Text>
<Text>
{item.menu_price}
</Text>
</View>
</View>
)
}
componentDidMount() {
const url = 'http://192.168.254.102:3307/foods/'
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
dataSource: responseJson.data
})
})
.catch((error) => {
console.log(error)
})
}
render(){
console.log(this.state.dataSource)
const { params } = this.props.navigation.navigate('state');
return (
<View style = { styles.container }>
<FlatList
data = { this.state.dataSource }
renderItem = {this.renderItem}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
}
AppRegistry.registerComponent('Details', () => Details);
解决方案
推荐阅读
- javascript - 如何找到与 URL 匹配的 href
- pyspark - pyspark-sql:打印表达式的别名
- sails.js - 在终端中禁用请求日志
- asp.net-core-identity - 如何更改登录用户的用户名?
- laravel - Laravel 5.4 注销/登录后一切重定向回家
- javascript - JavaScript:在没有 ES6 的情况下将两个列表合并到 JSON 对象中并将相同的键值附加在一起
- javascript - 将标签添加到方形 Highcharts Gant
- c - 键入 Quit 以退出 C 程序
- c - strtok() 用于 CSV 文件打印 (null) 以及所需值
- omnet++ - 更改 Veins/Omnet++/Sumo 中的特定红绿灯