Javascript React Native-使用两个不同的获取请求浏览两个屏幕

我是新来的。我正在创建一个包含食品类别按钮的平面列表，一旦单击一个类别按钮，第二个页面将显示包含各种食品的页面，具体取决于用户单击的类别按钮

类别按钮的名称是从我的数据库加载的，因此我有一个获取。现在，正如我说过的，我必须在点击按钮后显示第二个页面

我已经完成了一个代码，其中有两种获取请求，用于在按钮中显示我的类别名称，以及使用另一个获取导航到第二页

问题是,；单击类别按钮后，“我的按钮”将不会显示任何第二页

这是我的密码

categories.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);

import React，{Component}来自'React'；
导入{文本，触摸突出显示，视图，
样式表、平台、平面列表、AppRegistry、，
可触摸不透明度
}从“反应本机”；
var screen=Dimensions.get（'window'）*/
导出默认类类别扩展组件{
静态导航选项={
标题：“产品2”
};
状态={
数据：[]，
};
fetchData=async（）=>{
const response_Cat=等待取数（'http://192.168.254.102:3307/Categories/');
const category_Cat=等待响应_Cat.json（）；
this.setState（{data:category_Cat}）；
};
componentDidMount（）{
这是fetchData（）；
};
FoodCat=async（）=>{
const{params}=this.props.navigation.navigate（'state'）；
const response_Food=等待提取（'http://192.168.254.102:3307/foods/“+参数id）；
const food_food=等待响应_food.json（）；
this.setState（{data:food_food}）；
};
componentDidCatch（）{
this.FoodCat（）；
};
render（）{
const{navigate}=this.props.navigation；
const{params}=this.props.navigation.navigate（'state'）；
返回(
导航（'FoodCat'，{id:item.id}）>{item.cat_name}
}
keyExtractor={（x，i）=>i}
/>
);
}
}
AppRegistry.registerComponent（'类别'，（）=>类别）；

Details.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);

import React，{Component}来自'React'；
导入{AppRegistry，样式表，
平面列表，文本，视图}
从“反应本机”；
导出默认类详细信息扩展组件{
构造函数（）{
超级（）
此.state={
数据源：[]
}
}
renderItem=（{item}）=>{
返回(
{item.menu_desc}
{item.menu_price}
)
}
componentDidMount（）{
常量url=http://192.168.254.102:3307/foods/'
获取（url）
.then（（response）=>response.json（））
.然后（（responseJson）=>{
console.log（responseJson）；
这是我的国家({
数据源：responseJson.data
})
})
.catch（（错误）=>{
console.log（错误）
})
}
render（）{
console.log（this.state.dataSource）
const{params}=this.props.navigation.navigate（'state'）；
返回(
index.toString（）}
/>
);
}
}
AppRegistry.registerComponent（'详细信息'，（）=>详细信息）；

您在哪里定义了

导航

？是不是

StackNavigation

？我想你的意思是“从'react navigation'导入{StackNavigator}”；如果是，它位于我的App.js sir你是否尝试了onPress中的console.log，点击列表项时是否真的调用了它？并确保下一个屏幕（FoodCat）的键是正确的，即与App.js.Ahhm中定义的键相同。当我将导航（'FoodCat'，{id:item.id}）更改为“导航（'Details'，{…}）时，listview正在工作.但是现在，我得到了一个空白输出，标题在那里，但是食物的种类没有显示。我得到了！我刚刚在我的后端创建了两个函数，第一个包含带有“从表中选择”的类别，另一个是带有“从表中选择”id的菜单。id是两个表之间的关系。