React Native路由传参报错Undefined is not an object evaluating route.params.input
问题触发原因
- 你的
Rent a car(对应IznajmiScreen)是导航栈的初始页面,应用启动时会优先加载该页面,此时没有任何前置路由跳转传参动作,route.params本身为undefined,直接执行const { input } = route.params会触发空解构报错,导致应用直接崩溃。 - 你之前的临时操作生效是因为:删除解构代码后应用正常启动,跳转输入页提交内容再返回
Rent a car时,路由已经携带了input参数,此时热更加回解构代码时用的是当前已存在参数的路由状态,因此可以正常运行。但刷新应用后会重置到初始加载状态,route.params回到无值状态,因此又会崩溃。 - 你给文本输入加默认值没有作用,是因为应用启动崩溃时根本没有执行到输入页的代码,问题出在初始页的路由参数兜底逻辑缺失。
修复方案
你可以任选以下任意一种方案解决:
- 解构时添加兜底逻辑
修改IznajmiScreen中的参数解构代码,给route.params和input都添加默认值:
// 兜底params为空对象,input默认是空字符串 const { input = '' } = route.params || {};
- 在导航配置中给初始页配置默认参数
修改导航栈中Rent a car页面的配置,添加initialParams属性提前注入默认参数:
<IznajmiStack.Screen options={{headerRight:()=>(<Button title="Predaj Oglas" onPress={()=>{}}/>)}} name="Rent a car" component={IznajmiScreen} initialParams={{ input: '' }} // 新增默认参数配置 />
额外注意:你当前IznajmiScreen代码中使用了
detaljiExpanded和setDetaljiExpanded变量,但没有声明对应的useState,后续补全逻辑时需要加上,否则也会触发运行时报错。
内容的提问来源于stack exchange,提问作者Patrick89
相关产品推荐
相关产品推荐

