React Navigation栈推入相同Posts屏幕时旧屏幕同步更新问题求助

问题原因 #

你遇到的问题是因为传递的query是引用类型（对象），React Navigation在push新页面时，若参数为引用类型，多个页面实例会共享同一个对象引用。当任意一个页面修改该对象或重新读取数据时，所有同路由页面的参数都会同步变化，导致数据完全一致。

解决办法 #

1. 传递参数时深拷贝对象 #

在push页面时，对query对象进行深拷贝，确保每个新页面拿到独立的引用，避免共享：

// 方式1：JSON序列化反序列化（适合无函数/特殊对象的简单场景）
navigation.push('Posts', { 
  query: JSON.parse(JSON.stringify({ keyword: 'iphone' })) 
})

// 方式2：手动解构拷贝（仅适用于单层对象）
navigation.push('Posts', { 
  query: { ...{ keyword: 'iphone' } } 
})

// 方式3：使用深拷贝库（如lodash，适合嵌套复杂对象）
import cloneDeep from 'lodash/cloneDeep';
navigation.push('Posts', { 
  query: cloneDeep({ keyword: 'iphone', category: 'electronics' }) 
})

2. 在组件内部将参数转为本地状态 #

在Posts组件中，将导航参数拷贝到组件本地状态，每个页面实例维护自己的独立数据：

import { useRoute } from '@react-navigation/native';
import { useState, useEffect } from 'react';

function Posts() {
  const route = useRoute();
  const [localQuery, setLocalQuery] = useState({});

  useEffect(() => {
    // 深拷贝参数到本地状态
    setLocalQuery(JSON.parse(JSON.stringify(route.params?.query)));
  }, [route.params?.query]);

  // 后续业务逻辑使用localQuery而非route.params.query
  return (
    // 组件渲染内容
  );
}

3. 全局状态管理区分页面实例（若使用） #

如果项目用了Redux、Zustand等全局状态管理工具，需为每个Posts页面实例分配独立的数据切片，可通过页面的navigation.state.key作为唯一标识来区分不同页面的数据：

// 以Zustand为例，创建带页面key的状态
import { create } from 'zustand';

const usePostsStore = create((set) => ({
  postsData: {},
  setPostsData: (pageKey, data) => set((state) => ({
    postsData: { ...state.postsData, [pageKey]: data }
  })),
  getPostsData: (pageKey) => (state) => state.postsData[pageKey] || {}
}));

// 在Posts组件中使用
function Posts() {
  const navigation = useNavigation();
  const pageKey = navigation.state.key;
  const setPostsData = usePostsStore((state) => state.setPostsData);
  const postsData = usePostsStore((state) => state.getPostsData(pageKey));

  // 请求数据时关联pageKey
  useEffect(() => {
    fetchPosts(route.params?.query).then(data => {
      setPostsData(pageKey, data);
    });
  }, [route.params?.query, pageKey]);
}

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