React Native 跨其他页面操作后如何触发当前页面useEffect的异步数据拉取？

现有代码问题修复 #

你的useEffect依赖配置存在错误：把data加入依赖数组后，fetchData执行调用setData会触发data更新，反过来又触发useEffect重新执行，形成死循环。第一步先修正依赖配置：

// 只保留userId作为依赖，页面初始化或者userId变更时才拉取
useEffect(() => {
  fetchData();
}, [userId]);

另外你的fetchData写法存在缺陷：声明了async但没有用await，且try/catch只能捕获到response处理阶段的异常，fetch请求本身的网络错误无法捕获，优化后的写法参考：

async function fetchData() {
  try {
    const response = await fetch(`${baseURL}api/v1/data/${userId}`);
    const resData = await response.json();
    setData(resData.length > 0 ? resData : []);
  } catch (err) {
    console.log('请求异常', err);
    alert(err);
  }
}

跨页面数据同步实现方案 #

你需要实现已渲染页面感知其他页面的数据变更，有几种可行方案：

• 方案1：页面焦点监听（成本最低，适配你的场景）
  你是从注册页返回数据查看页时需要更新数据，直接用React Navigation提供的useFocusEffect即可，页面每次获得焦点时自动拉取最新数据：

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

// 替换原来的useEffect
useFocusEffect(
  useCallback(() => {
    fetchData();
  }, [userId])
);

这种方案不需要修改全局逻辑，直接适配你当前的页面跳转场景。

• 方案2：全局状态管理（通用性最高）
  如果需要多处共用同一份数据，选择任意全局状态管理方案即可：

  • 轻量场景用React内置的Context API，把数据、拉取方法、更新方法封装在Context Provider中，所有子组件都可以访问和更新，只要全局状态变更，所有订阅的页面都会自动刷新
  • 复杂场景可以用Zustand、Redux、Mobx等成熟的状态管理库，实现逻辑更简洁
    注册页新增数据完成后，直接更新全局状态，数据查看页订阅该状态就会自动同步。

• 方案3：AsyncStorage配合订阅发布（适合需要本地持久化的场景）
  AsyncStorage本身没有提供数据变化监听能力，需要搭配自定义事件总线实现同步：

1. 实现一个简单的事件总线：

const EventBus = {
  events: {},
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  },
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(cb => cb(data));
    }
  },
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

2. 注册页新增数据后，将新数据写入AsyncStorage，同时触发事件：

// 新增数据成功后
await AsyncStorage.setItem('userData', JSON.stringify(newData));
EventBus.emit('dataUpdated');

3. 数据查看页监听事件，收到通知后重新拉取数据或者读取AsyncStorage的最新数据：

useEffect(() => {
  const updateHandler = () => {
    fetchData();
    // 或者直接读AsyncStorage的内容更新
  };
  EventBus.on('dataUpdated', updateHandler);
  return () => EventBus.off('dataUpdated', updateHandler);
}, [userId]);

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