Reactjs 在react native中的两个页面之间传输需要的数据

我想在我的应用程序的两个页面之间传输数据，通常我对语法

this.props.navigation.state.params…

没有任何问题，但在这种情况下，问题是itemCategory没有定义，因为我的第一个页面（初始路径）是

主屏幕

，而我的第二个页面是

CategoryListScreen

。那么到底发生了什么：

用户启动应用程序并进入主屏幕

在构造函数中，我试图用itemCategory修改state类别，目前还没有定义

此.state={ 类别：this.props.navigation.state.params.itemCategory， 餐厅数据：[]， }

应用程序崩溃，因为this.props.navigation.state.params.itemCategory未定义

我已尝试通过

CategoryListScreen

更改初始路径，并且数据已正确设置在主屏幕页面的状态类别中，因为它现在是我的第二个页面

所以我想知道的是如何设置变量类别而不使应用程序崩溃

用户使用

CategoryListScreen

来选择他想要吃的食物类型，因此我可以调用我的API来仅显示拥有此类食物的餐厅

/*开始类别列表屏幕*/
从“道具类型”导入道具类型
从“React”导入React，{Component}
从“react native”导入{FlatList、图像、文本、TouchableOpacity、视图}
从“../../environments/environment”导入{environment}
从“../../interceptor/tokenInterceptor”导入axios
从“../../components/Hamburger/Hamburger”导入汉堡
从“./styles”导入样式
常数menuData=[
{ 
id:'1'，
标题：“汉堡”，
image:require（'../../assets/images/burger.jpg'），
},
{ 
id:'2'，
标题：“披萨”，
image:require（'../../assets/images/pizza.jpeg'），
},
{ 
id:'3'，
标题:"寿司",，
image:require（'../../assets/images/sushi.jpg'），
},
{ 
id:'4'，
标题:"玉米卷",，
image:require（'../../assets/images/tacos.jpeg'），
},
{ 
id:'5'，
标题:"中国人",，
image:require（'../../assets/images/plat_chinois.jpg'），
},
{ 
id:'6'，
标题：“法国”，
image:require（'../../assets/images/platçu français.jpg'），
},
{ 
id:'7'，
标题：“墨西哥”，
image:require（'../../assets/images/mexicain.jpg'），
},
{ 
id:'8'，
标题：'意大利'，
image:require（'../../assets/images/italien.jpg'），
},
]
类CategoryListScreen扩展组件{
静态导航选项=（{navigation}）=>({
标题：“菜单”，
左校长：(
{
navigation.openDrawer（）
}}
/>
),
})
建造师（道具）{
超级（道具）
此.state={
餐厅数据：[]，
}
}
onPress=itemCategory=>{
//console.log（'category:'，itemcegory）；
this.props.navigation.navigate（'HomeScreen'，{itemCategory}）
//控制台日志（项目）；
//此.getRestaurantByCategories（项目）
}
renderItem=（{item}）=>(
this.onPress（item.title）}>
{item.title}
)
render（）{
返回(
`${item.id}`}
/>
)
}
}
CategoryListScreen.propTypes={
导航：PropTypes.shape({
导航：需要PropTypes.func.isRequired，
}),
}
导出默认类别列表屏幕
/*端类别列表屏幕*/
/*开始主屏幕*/
从“道具类型”导入道具类型
从“React”导入React
进口{
异步存储，
平面列表，
形象,，
滚动视图，
文本，
触控高光，
看法
}从“反应本机”
从“lodash”导入
从“../../components/Hamburger/Hamburger”导入汉堡
从“../../components/ShoppingCartButton/ShoppingCartButton”导入ShoppingCartButton
从“../../environments/environment”导入{environment}
从“../../interceptor/tokenInterceptor”导入axios
从“./styles”导入样式
常量分类数据=[
{
id:'1'，
标题：“汉堡”，
image:require（'../../assets/images/burger.jpg'），
},
{
id:'2'，
标题：“披萨”，
image:require（'../../assets/images/pizza.jpeg'），
},
{
id:'3'，
标题:"寿司",，
image:require（'../../assets/images/sushi.jpg'），
},
{
id:'4'，
标题:"玉米卷",，
image:require（'../../assets/images/tacos.jpeg'），
},
{
id:'5'，
标题:"中国人",，
image:require（'../../assets/images/plat_chinois.jpg'），
},
{
id:'6'，
标题:"美食",，
image:require（'../../assets/images/platçu français.jpg'），
},
]
/**
*上页构件类别的施工图
*/
ItemCategory=（{title，image}）=>{
返回(
{title}
)
}
/**
*Constructuit les composant餐厅
*/
ItemRestaurant=（{id，title，image，distance，categories}）=>{
返回(
{/*{id}*/}
{/*  */}
{title}
距离depuis votre位置：{distance}m
类别：{${categories}}
)
}
导出默认类主屏幕扩展React.Component{
静态导航选项=（{navigation}）=>({
标题:"家",，
标题左侧：（）=>(
{
navigation.openDrawer（）
}}
/>
),
头灯：（）=>(
{
导航。导航（'CartScreen'）
}}
/>
),
})
建造师（道具）{
超级（道具）
//if（this.props.navigation.state.params.itemCategory===未定义）{
//console.log（'dans le if'）
//此.state={
//餐厅数据：[]，
//   }
//}其他{
//此.state={
//类别：this.props.navigation.state.params.itemCategory，
//餐厅数据：[]，
//   }
// }
//如果（this.props.navigation.state.params.itemCategory==u
import _ from 'lodash'

....
this.state = {
  categories: _.get(this.props, 'navigation.state.params.itemCategory'),
  restaurantData: []
}
...