React Native跨页面传递处理函数更新父页面状态报错排查

问题结论 #

完全可以从第二个路由页面更新第一个页面（父页面）的状态，你遇到的HandleChangeFirstName不是函数或未定义报错，本质是错误使用React Navigation路由传参规则导致的，不是跨页更新状态本身不可行。

报错根本原因 #

React Navigation 默认会对所有路由传递的参数做序列化处理，函数、类实例、Symbol这类非序列化值会在序列化过程中被丢弃，你通过navigate方法把更新函数作为参数传递时，函数已经被过滤，第二个页面从route.params中取到的HandleChangeFirstName实际是undefined，调用时自然会触发类型错误。

可落地实现方案 #

方案1：路由回传参数（无额外依赖，官方推荐） #

不需要跨路由传递更新函数，改为第二个页面收集到用户输入后，把新值作为参数回传给第一个页面，第一个页面监听页面聚焦事件拿到新值后，调用本地的状态更新函数即可。

第一个页面代码修改

import { useFocusEffect } from '@react-navigation/native';
import { useCallback } from 'react';

// 原状态更新函数保留，不需要改动
const HandleChangeFirstName = (e, i) => {
    let newArr = [...BookingData];
    newArr[i]['dest_firstname'] = e;
    setBookingData(newArr);
}

// 新增页面聚焦监听，接收第二个页面回传的参数
useFocusEffect(
  useCallback(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      if (route.params?.updatedFirstName !== undefined && route.params?.targetIndex !== undefined) {
        // 拿到回传值后调用本地更新函数
        HandleChangeFirstName(route.params.updatedFirstName, route.params.targetIndex);
        // 清除回传参数，避免重复触发更新
        navigation.setParams({ updatedFirstName: undefined, targetIndex: undefined });
      }
    });
    return unsubscribe;
  }, [BookingData])
);

// 跳转逻辑修改：只传当前编辑项的数据和索引，不再传递更新函数
<TouchableOpacity onPress={() => navigation.navigate('BookingDestination', {
    dest_data: BookingData[i],
    targetIndex: i
})}>
    <Icon
        as={IconAnt}
        name="edit"
        size={5}
        color={'#FF403D'}
        mr="3"
    />
</TouchableOpacity>

第二个页面代码修改

// 从路由参数中取需要的数据，不再取传递的函数
const { dest_data, targetIndex } = route.params;

<Text p="1" fontWeight="500" fontSize="13">First Name</Text>
<TextBox
    onChangeText={(e) => {
        // 输入完成/需要更新时，把新值和索引作为参数回传给第一个页面
        navigation.navigate({
          name: '第一个页面的实际路由名称', // 替换为你项目里第一个页面对应的路由名
          params: {
            updatedFirstName: e,
            targetIndex: targetIndex
          },
          merge: true
        })
    }}
    value={dest_data?.dest_firstname}
    name="firstname"
    placeholder="First Name"
    size="lg"
    isDisabled={dest_data?.isSearchSelected ? true : false}
    fontSize="12"
    placeholderColor="#000"
    fontWeight="300"
    icon="user"
    iconColor="#1E89D6"
>
</TextBox>

如果不需要实时同步输入值，只需要在用户点击确认/返回按钮时同步，把onChangeText里的回传逻辑移到确认按钮的点击事件里即可。

方案2：全局状态共享（适合多页面频繁操作同一份数据） #

如果多个页面都需要修改BookingData这份数据，可以把状态放到React Context、Zustand、Redux等全局状态容器中，两个页面直接从全局状态读取值、调用更新方法，完全不需要依赖路由传参，代码维护性更高。

注意：不要尝试关闭React Navigation的序列化校验来强行传递函数，这种写法会导致状态持久化、页面跳转埋点、深度链接等功能失效，不属于官方支持的用法。

内容的提问来源于stack exchange，提问作者DevGe