React Navigation 5 参数缓存显示旧值问题咨询

这个问题的核心是你的DetailsScreen组件没有监听route.params的变化——第一次跳转时组件挂载并获取了初始参数，但第二次跳转时组件并未重新挂载，只是route.params更新了，而你的组件没对这个变化做出响应，所以一直显示旧值。下面给你两种直接可行的解决方案：

方案1：用useState+useEffect监听参数变化 #

把参数存入组件本地状态，通过useEffect监听route.params的更新，同步刷新状态：

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

const DetailsScreen = ({ navigation, route }) => {
  // 初始化状态为当前参数值，没有则为空字符串
  const [userName, setUserName] = useState(route.params?.detail?.name || '');

  useEffect(() => {
    // 每次route.params变化时，更新本地状态
    if (route.params?.detail?.name) {
      setUserName(route.params.detail.name);
    }
  }, [route.params]); // 依赖项设为route.params，参数变化时自动触发

  return (
    <View>
      <Text>{userName}</Text>
    </View>
  );
};

export default DetailsScreen;

方案2：直接读取最新的route.params（更简洁） #

如果不需要把参数存在本地状态，也可以直接在渲染时读取最新的route.params，这样每次参数变化组件都会自动重新渲染显示新值：

import React from 'react';
import { View, Text } from 'react-native';

const DetailsScreen = ({ navigation, route }) => {
  // 直接读取当前最新的参数，确保每次渲染都取到最新值
  const userName = route.params?.detail?.name || '';

  return (
    <View>
      <Text>{userName}</Text>
    </View>
  );
};

export default DetailsScreen;

为什么你之前的useEffect无效？ #

你之前写的useEffect依赖是空数组[]，只会在组件挂载时执行一次，而且清理函数是组件卸载时才调用，这时候去设置参数已经晚了，更关键的是它根本没监听route.params的变化，所以完全起不到更新参数的作用。

另外你的列表页跳转代码是没问题的，只要保证详情页能正确响应参数变化，就能显示最新的用户信息了。

内容的提问来源于stack exchange，提问作者Wede Asmera Tseada