React Native Navigation参数更新未生效问题咨询

架构老林

2026-9-30

问题原因

核心是React Navigation的路由参数属于静态快照传递：跳转页面时传递的数组和更新函数，本质是把跳转瞬间的数组值拷贝一份传给新页面，更新函数虽然可以调用修改父页面的state，但新页面本身没有订阅父页面的state变化，路由参数也不会自动随父页面state更新同步刷新，所以新页面的UI不会触发重渲染，只能看到初始传过来的数组值。
父页面的state更新后，只会触发父页面自身的重渲染，新页面作为独立的路由栈实例，默认不会响应其他页面的state变更，只有返回上一级父页面时，父页面重渲染才会展示最新值。

解决办法

方案1：新页面本地维护独立state（最简单通用）
把路由传过来的数组作为初始值存入新页面的本地state，所有修改操作先更新本地state触发当前页面重渲染，再同步调用父页面的更新函数同步父级数据，示例代码：

import { useState } from 'react';

function NewPage({ route }) {
  // 接收父页面传递的参数
  const { list: initList, setParentList } = route.params;
  // 新页面本地维护state，用于触发当前页UI更新
  const [localList, setLocalList] = useState(initList);

  const handleUpdateList = (newItem) => {
    // 必须返回新的数组引用，不能直接修改原数组
    const updatedList = [...localList, newItem];
    // 先更新本地state，触发当前页面重渲染
    setLocalList(updatedList);
    // 同步更新父页面的state，保证返回时父页面数据一致
    setParentList(updatedList);
  }
  // 渲染用localList即可实时看到更新
  return <>{localList.map(item => <Text key={item.id}>{item.content}</Text>)}</>
}

方案2：使用全局状态管理共享数据
如果这类跨页面共享数据的场景较多，建议把需要共享的数组存到Redux、Zustand、Jotai等全局状态库中，父子页面都从同一个全局store读取数据、调用更新方法，任意页面修改数据后，所有订阅该状态的页面都会自动重渲染，不需要依赖路由传参传递状态和更新函数。
方案3：监听路由参数变化同步数据
如果需要严格和父页面的数组状态保持一致，可以在新页面用useEffect监听路由参数中数组的变化，同步更新到本地state：

const { list, setParentList } = route.params;
const [localList, setLocalList] = useState(list);

// 监听父页面传递的list参数变化，自动同步到本地
useEffect(() => {
  setLocalList(list);
}, [list]);

注意：所有数组更新操作都要返回新的数组引用，禁止直接修改原数组后调用更新函数（比如直接调用push/splice修改原数组再传值），否则React无法检测到state变化，不会触发重渲染。

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