React Native - 使用两个不同的获取请求导航两个屏幕

Question

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

类别按钮的名称是从我的数据库加载的，所以我有一个提取。现在，正如我所说，只要点击一个按钮，我就必须显示第二页。

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

问题是;单击类别按钮后，我的按钮将不会显示任何第二页。

这是我的代码

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

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