React Native中如何实现API数据变更时自动更新组件信息？

首先咱们先梳理下当前代码存在的两个核心问题：

1. useEffect仅执行一次：你的useEffect依赖项是空数组[]，这意味着只有组件首次挂载时才会调用getInfoUser获取数据，后续不管API数据怎么变化，都不会重新触发请求。
2. 数据更新逻辑有误：你用setInfoUser([...infoUser, userData])把新数据追加到数组中，而非替换旧数据。如果是单个用户的信息，这会导致数组里留存多份用户数据，渲染时可能还是显示旧的那一条。

接下来一步步解决问题：

第一步：修复数据更新逻辑 #

既然是单个用户的信息，咱们可以把infoUser的初始值改成对象而非数组，更新时直接替换为新数据：

// 初始值改为空对象，更符合单个用户数据的场景
const [infoUser, setInfoUser] = useState({});

const getInfoUser = async () => {
  try {
    const accessToken = await AsyncStorage.getItem('@access_token');
    // 用async/await替代.then，代码更简洁易读
    const response = await axios.get(
      'https://apiexample.com/cliete',
      { headers: { Authorization: `Bearer ${accessToken}` } },
    );
    console.log('DADOS USER:', response.data.data);
    const userData = response.data.data;
    // 直接替换为新的用户数据，而非追加
    setInfoUser(userData);
  } catch (e) {
    if (e.response) {
      // 处理axios请求错误
      console.log('请求错误:', e.response);
    } else {
      // 处理token读取错误
      console.log('Erro de token', e);
    }
  }
};

对应的渲染代码也无需map，直接使用对象属性即可：

<TouchableOpacity>
  <Text style={styles.subtitle}>Nome Completo</Text>
  <Text style={styles.title}>{infoUser.nomeCompleto}</Text>
</TouchableOpacity>

第二步：实现数据变更时的自动更新 #

根据你在其他页面修改数据后返回原页面的场景，推荐几种可行的方案：

方案1：监听页面聚焦（React Navigation场景） #

如果你使用React Navigation，可以利用useFocusEffect钩子，每次页面重新聚焦时重新获取数据：

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

// 替换原来的useEffect
useFocusEffect(
  React.useCallback(() => {
    getInfoUser();
  }, [])
);

这样每次从修改页面切回原页面时，都会重新请求API获取最新数据。

方案2：使用状态管理工具（Context/Redux） #

如果你的应用涉及多页面共享用户数据，用Context API或Redux管理全局状态会更合适。在修改数据的页面更新全局状态，原页面订阅这个状态就能自动刷新：

以Context API为例：

// 创建UserContext
const UserContext = React.createContext();

// 在根组件提供Context
function App() {
  const [infoUser, setInfoUser] = useState({});
  
  return (
    <UserContext.Provider value={{ infoUser, setInfoUser }}>
      {/* 你的导航组件 */}
    </UserContext.Provider>
  );
}

// 原页面中使用Context
function ProfileScreen() {
  const { infoUser } = React.useContext(UserContext);
  
  // 渲染逻辑...
}

// 修改数据的页面中更新Context
function EditProfileScreen() {
  const { setInfoUser } = React.useContext(UserContext);
  
  const saveData = async (newData) => {
    // 调用API保存修改后的数据
    await axios.put('https://apiexample.com/cliete', newData);
    // 更新全局状态，原页面会自动同步
    setInfoUser(newData);
  };
  
  // 渲染逻辑...
}

方案3：WebSocket实时监听数据变化 #

如果需要实时感知API数据的变更（比如其他端修改了数据），可以和后端配合使用WebSocket，当数据变化时后端主动推送，前端收到消息后更新状态：

useEffect(() => {
  const socket = new WebSocket('wss://apiexample.com/ws');
  
  socket.onmessage = (event) => {
    const updatedUserData = JSON.parse(event.data);
    setInfoUser(updatedUserData);
  };
  
  // 组件卸载时关闭WebSocket连接
  return () => {
    socket.close();
  };
}, []);

这个方案需要后端支持WebSocket，适合实时性要求高的场景。

总结 #

如果只是简单的页面切换后更新，方案1（监听页面聚焦）最容易实现；如果是复杂的多页面共享状态，方案2更合适；实时性要求高的场景可以选择方案3。先修复数据更新逻辑，再搭配适合的刷新方案，就能解决你遇到的问题了。

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