React Native页面传参后数据不即时更新，需刷新的解决办法

核心问题分析 #

1. 参数传递异步问题：第一页里setId(item.ID)是异步操作，执行后立刻调用navigation.navigate传id，此时id还是旧值，导致目标页面初始拿到的参数不正确。
2. 数据未自动刷新问题：目标页面的useEffect依赖为空数组，仅在组件首次挂载时执行一次getData。当新参数传递过来时，不会重新触发请求，所以显示旧数据。

第一页代码修改 #

直接传递item.ID即可，无需用setId存状态（完全没必要，反而引发异步问题）：

// 修改 onPress 部分
onPress={() => {
  navigation.navigate('Rekap_Bencana', {
    params: item.ID // 直接传item的ID，跳过异步setId
  });
}}

// 以下代码可直接删除，无实际作用
// const [id, setId] = useState();

目标页面（Rekap_Bencana）代码修改 #

1. 正确获取路由参数，处理可能的空值
2. 给useEffect添加params依赖，参数变化时重新请求数据
3. 请求前判断params是否存在，避免无效请求

const Rekap_Bencana = () => {
  const route = useRoute();
  const navigation = useNavigation();
  // 用可选链获取参数，避免参数不存在时报错
  const params = route.params?.params;

  const [data, setData] = useState();

  // 依赖数组加入params，参数变化时重新执行请求
  useEffect(() => {
    if (params) { // 有参数才发起请求
      getData();
    }
    console.log(params);
  }, [params]);

  const getData = () => {
    fetch('http://192.168.0.103/aplikasi/restapi.php?op=getBencanaDetail', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        id: params,
      }),
    })
      .then(res => res.json())
      .then(resp => {
        setData(resp);
        console.log(resp);
      })
      .catch(err => console.error('请求出错:', err)); // 新增错误捕获，方便排查问题
  };

  // ... 页面渲染逻辑
};

额外优化建议 #

• 给data设置初始值（比如null或空数组），渲染时可添加加载状态：{!data ? <Text>加载中...</Text> : <你的页面内容>}，提升用户体验
• 可以给请求添加取消逻辑，避免页面切换时残留无效请求

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