将参数传递到新屏幕 React Navigation

Question

我有一个小问题。我在一个基于项目的课程的 Meals 应用程序上工作，但我坚持使用 React Navigation 模块。我想将数据从 dummy-db 文件传递​​到屏幕。我写了代码，但屏幕没有显示数据。唯一有效的是标题。

我会把代码留在这里：

import React, { useEffect, useState } from 'react';
import { View, FlatList, StyleSheet, Text } from 'react-native';
import { MEALS } from '../data/dummy-data';
import MealItem from '../components/MealItem';
import {HeaderButtons, Item} from 'react-navigation-header-buttons';
import HeaderButton from '../components/HeaderButton';



const MealDetailScreen = props => {
  const renderMealItem= (itemData) =>{

    return (
      <MealItem 
        title={itemData.item.title}
        image={itemData.item.imageUrl}
        duration={itemData.item.duration}
        complexity={itemData.item.complexity}
        affordability={itemData.item.affordability}
        ingredients = {itemData.item.ingredients}/>
    );
  };
  const catId = props.route.params.categoryIds;
  const title = props.route.params.title;
  
  
  
  const [displayedMeals, setdisplayedMeals] = useState([]);
  
  
  
  useEffect(() => {
    
    props.navigation.setOptions({headerTitle: title})

    const _filtered = MEALS.filter( meal => meal.categoryIds.includes(catId))
   
    setdisplayedMeals(_filtered)
  }, [])

  return (
    <View style={styles.screen}>
      <FlatList 
        data={displayedMeals}
        keyExtractor={item => item.id}
        renderItem={renderMealItem}
        style={{ width: '100%' }}
        />
        
    </View>
  )
};


const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 15
  }
});

export default MealDetailScreen;

谢谢你帮助我！