React Native下拉选择器选中值跨页面传递及报错解决

一、导航跳转基础问题排查 #

• 确认导航栈已正确注册SubScreen1，示例配置如下：

  const Stack = createStackNavigator();
  function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="SubScreen1" component={SubScreen1} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
  

• 检查Search按钮的onPress事件是否正确调用导航方法，确保navigation对象正常获取：

  import { useNavigation } from '@react-navigation/native';
  
  const HomeScreen = () => {
    const navigation = useNavigation();
    const [selectedValue, setSelectedValue] = useState(null);
  
    const handleSearch = () => {
      navigation.navigate('SubScreen1', { selectedValue });
    };
  
    return (
      <>
        <DropDownPicker
          items={[{ label: '选项1', value: 'opt1' }, { label: '选项2', value: 'opt2' }]}
          onChangeItem={(item) => setSelectedValue(item.value)}
        />
        <Button title="Search" onPress={handleSearch} />
      </>
    );
  };
  

二、"undefined is not an object"报错解决 #

该错误多因访问未定义对象的属性导致，对应场景及修复方式：

1. 选中值未初始化
   用useState给选中值设置初始值，避免未定义状态：

   const [selectedValue, setSelectedValue] = useState(''); // 或null/默认选项值
   

2. navigation对象未正确获取
   • 函数组件优先用useNavigation钩子，类组件通过this.props.navigation访问；
   • 若组件为嵌套子组件，需通过props传递navigation或使用useNavigation。
3. 接收参数时未做空值判断
   在SubScreen1中接收参数时，先判断参数是否存在：

   const SubScreen1 = ({ route }) => {
     // 可选链+默认值避免报错
     const selectedValue = route.params?.selectedValue || '无选中值';
     return <Text>选中值：{selectedValue}</Text>;
   };
   

三、常见误区规避 #

• 不要在DropDownPicker的onChangeItem回调中直接触发跳转，确保点击Search按钮时才执行导航逻辑，同时确认此时selectedValue已完成更新；
• 检查名称拼写：导航页面名称SubScreen1、参数名需前后完全一致，避免大小写或拼写错误。

内容的提问来源于stack exchange，提问作者L.Calvin