TypeError：undefined不是对象评估“ route.params.prodId”

问题描述

我想在导航中单击图标并传递一个值时导航到其他屏幕，但是出现错误 这是我要通过传递值的位置的组件

const UserProductScreen = (props) => {
  const userProducts = useSelector((state) => state.products.userProducts);
  const dispatch = useDispatch();

  const editProductHandler = (id) => {
    props.navigation.navigate('editProduct',{
      prodId: id,});
  };

  return (
    <FlatList
      data={userProducts}
      keyExtractor={(item) => item.id}
      renderItem={(itemData) => (
        <ProductItem
          image={itemData.item.imageUrl}
          title={itemData.item.title}
          price={itemData.item.price}
          onselect={() => {
            editProductHandler(itemData.item.id);
          }}>
          <Button
            title="Edit"
            onPress={() => {
              editProductHandler(itemData.item.id);
            }}
          />
          <Button
            title="Delete"
            onPress={() => {
              dispatch(productAction.deleteProduct(itemData.item.id));
            }}
          />
        </ProductItem>
      )}
    />
  );
};

export default UserProductScreen;

这是我收到其他组件传递的值的组件

const EditProductScreen = ({route,navigation}) => {
  const {prodId} = route.params;

  const editedProduct = useSelector((state) =>
    state.products.userProducts.find((prod) => prod.id === prodId),);

  const [title,setTitle] = useState(editedProduct ? editedProduct.title : '');
  const [imageUrl,setImageUrl] = useState(
    editedProduct ? editedProduct.imageUrl : '',);
  const [price,setPrice] = useState('');
  const [description,setDescription] = useState(
    editedProduct ? editedProduct.description : '',);

  const dispatch = useDispatch();

  return (
    <ScrollView>
      <View style={styles.form}>
        <View style={styles.formControl}>
          <Text style={styles.label}>Title</Text>
          <TextInput
            style={styles.input}
            value={title}
            onChangeText={(text) => setTitle(text)}
          />
        </View>
        <View style={styles.formControl}>
          <Text style={styles.label}>Image url</Text>
          <TextInput
            style={styles.input}
            value={imageUrl}
            onChangeText={(text) => setImageUrl(text)}
          />
        </View>
        {editedProduct ? null : (
          <View style={styles.formControl}>
            <Text style={styles.label}>Price</Text>
            <TextInput
              style={styles.input}
              value={price}
              onChangeText={(text) => setPrice(text)}
            />
          </View>
        )}
        <View style={styles.formControl}>
          <Text style={styles.label}>Description</Text>
          <TextInput
            style={styles.input}
            value={description}
            onChangeText={(text) => setDescription(text)}
          />
        </View>

        {editedProduct ? (
          <Button
            title="updated"
            onPress={() => {
              dispatch(
                productsAction.updateProduct(
                  prodId,title,description,imageUrl,),);
            }}
          />
        ) : (
          <Button
            title="Add product"
            onPress={() => {
              dispatch(
                productsAction.createProduct(
                  title,price,);
            }}
          />
        )}
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  form: {
    margin: 20,},formControl: {
    width: '100%',label: {
    marginVertical: 8,input: {
    paddingHorizontal: 2,paddingVertical: 5,borderBottomColor: '#ccc',borderBottomWidth: 1,});

export default EditProductScreen;

这是导航代码所在的文件

const Stack = createStackNavigator();
const Stackorder = createStackNavigator();
const StackUserProduct = createStackNavigator();
const Drawer = createDrawerNavigator();

const stacknavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Product"
        component={ProductOverviewScreen}
        options={({navigation}) => ({
          headerTitle: 'Products',headerStyle: {
            backgroundColor: '#273469',headerTintColor: '#EBF2FA',headerRight: () => (
            <TouchableOpacity onPress={() => navigation.navigate('Cart')}>
              <Icon name="cart-plus" style={styles.iconstyle} size={25} />
            </TouchableOpacity>
          ),headerLeft: () => (
            <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
              <Icon name="align-justify" style={styles.iconstyle} size={25} />
            </TouchableOpacity>
          ),})}
      />
      <Stack.Screen
        name="Detail"
        component={ProductDetailScreen}
        options={{
          headerTitle: 'Detail',}}
      />
      <Stack.Screen
        name="Cart"
        component={CartScreen}
        options={{
          headerTitle: 'Orders',}}
      />

      <Stack.Screen
        name="order"
        component={OrderScreen}
        options={({navigation}) => ({
          headerTitle: 'Order',})}
      />
    </Stack.Navigator>
  );
};

const stacknavigatorOrder = () => {
  return (
    <Stackorder.Navigator>
      <Stack.Screen
        name="order"
        component={OrderScreen}
        options={({navigation}) => ({
          headerTitle: 'Order',})}
      />
    </Stackorder.Navigator>
  );
};

const stacknavigatorUserProduct = () => {
  return (
    <StackUserProduct.Navigator>
      <Stack.Screen
        name="userProduct"
        component={UserProductScreen}
        options={({navigation}) => ({
          headerTitle: 'User Products',headerRight: () => (
            <TouchableOpacity
              onPress={() => navigation.navigate('editProduct')}>
              <Icon name="pencil" style={styles.iconstyle} size={25} />
            </TouchableOpacity>
          ),})}
      />
      <Stack.Screen
        name="editProduct"
        component={EditProductScreen}
        options={({navigation}) => ({
          headerTitle: 'User Products',headerRight: () => (
            <TouchableOpacity
              onPress={() => {
                console.log();
              }}>
              <Icon name="check" style={styles.iconstyle} size={25} />
            </TouchableOpacity>
          ),})}
      />
    </StackUserProduct.Navigator>
  );
};

const ShopNavigator = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Products">
        <Drawer.Screen name="Products" component={stacknavigator} />
        <Drawer.Screen name="Order" component={stacknavigatorOrder} />
        <Drawer.Screen name="Admin" component={stacknavigatorUserProduct} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  iconstyle: {
    margin: 15,color: '#EBF2FA',});

export default ShopNavigator;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）