如何在React Navigation中刷新路由传递的user变量数据？

不需要用SocketIO，有几种更直接的本地更新方案，完全能满足你的需求：

1. 将user存入组件本地状态，直接修改更新 #

把从route.params获取的user存在组件的useState中，当FollowUser调用成功后，直接更新这个状态里的user相关字段（比如关注状态、粉丝数），组件会自动重新渲染，展示最新数据。

示例代码：

import { useState } from 'react';

function Profile({ route }) {
  // 初始化本地状态为传入的user
  const [user, setUser] = useState(route.params.user);
  const [isFollowing, setIsFollowing] = useState(user.isFollowed);

  const FollowUser = async () => {
    // 调用后端关注接口
    const success = await yourFollowApi(user.id);
    if (success) {
      setIsFollowing(true);
      // 直接更新本地user的关注状态和粉丝数
      setUser(prevUser => ({
        ...prevUser,
        isFollowed: true,
        followerCount: prevUser.followerCount + 1
      }));
    }
  };

  return (
    <div>
      <h2>{user.username}</h2>
      <p>粉丝: {user.followerCount}</p>
      <button onClick={FollowUser} disabled={isFollowing}>
        {isFollowing ? '已关注' : '关注'}
      </button>
    </div>
  );
}

2. 使用全局状态管理（如Context、Zustand、Redux） #

如果你的应用中有多个页面需要共享user数据，把user放到全局状态里，当关注操作成功后，直接更新全局状态的user数据，所有依赖该数据的组件都会自动刷新。

以Zustand为例的简化实现：

// 全局状态 store.js
import { create } from 'zustand';

export const useUserStore = create(set => ({
  targetUser: null,
  setTargetUser: user => set({ targetUser: user }),
  updateFollowStatus: (isFollowed) => set(state => ({
    targetUser: {
      ...state.targetUser,
      isFollowed,
      followerCount: state.targetUser.followerCount + (isFollowed ? 1 : -1)
    }
  }))
}));

// Profile组件
import { useUserStore } from './store';
import { useState, useEffect } from 'react';

function Profile({ route }) {
  const { targetUser, updateFollowStatus, setTargetUser } = useUserStore();
  const [isFollowing, setIsFollowing] = useState(targetUser?.isFollowed || false);

  // 组件挂载时初始化全局状态
  useEffect(() => {
    if (route.params.user) {
      setTargetUser(route.params.user);
    }
  }, [route.params.user, setTargetUser]);

  const FollowUser = async () => {
    const success = await yourFollowApi(targetUser.id);
    if (success) {
      setIsFollowing(true);
      updateFollowStatus(true);
    }
  };

  // 渲染逻辑...
  return (
    <div>
      <h2>{targetUser?.username}</h2>
      <p>粉丝: {targetUser?.followerCount}</p>
      <button onClick={FollowUser} disabled={isFollowing}>
        {isFollowing ? '已关注' : '关注'}
      </button>
    </div>
  );
}

为什么不需要SocketIO？ #

SocketIO主要用于处理跨客户端的实时数据同步（比如其他用户关注了这个用户，你的页面需要实时感知更新）。而你当前的场景只是自己操作后的本地数据更新，用上述两种方案完全足够，不需要引入SocketIO的复杂度。

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