如何在React页面间传递用户及地址数据以避免额外API调用？

你完全可以利用已获取的JSON数据，在不发起新API请求的前提下，打开新页面展示用户及关联地址的详情。以下是两种常用的实现方案：

方案1：路由跳转时通过state传递完整用户数据 #

借助React Router的路由state属性，在跳转详情页时直接携带用户的完整数据，详情页可直接从路由状态中读取信息。

表格页面的跳转逻辑 #

import { useNavigate } from 'react-router-dom';

const UserTable = ({ groups }) => {
  const navigate = useNavigate();

  const openDetailPage = (user) => {
    // 跳转时携带用户及地址的完整数据
    navigate('/user-details', { state: { user } });
  };

  return (
    <table>
      <thead>
        <tr>
          <th>用户名</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {groups.flatMap(group => group.users.map(user => (
          <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.email}</td>
            <td>
              <button onClick={() => openDetailPage(user)}>查看详情</button>
            </td>
          </tr>
        )))}
      </tbody>
    </table>
  );
};

详情页获取并展示数据 #

import { useLocation } from 'react-router-dom';

const UserDetails = () => {
  const location = useLocation();
  const { user } = location.state || {};

  if (!user) {
    return <div>未找到用户数据</div>;
  }

  return (
    <div className="user-detail-container">
      <h2>{user.name}</h2>
      <p>邮箱：{user.email}</p>
      <h3>地址信息</h3>
      <ul>
        <li>街道：{user.address.street}</li>
        <li>城市：{user.address.city}</li>
        <li>州/省：{user.address.state}</li>
        <li>邮编：{user.address.postalCode}</li>
        <li>国家：{user.address.country}</li>
      </ul>
    </div>
  );
};

方案2：用全局状态管理存储数据 #

将API获取的所有数据存入全局状态（比如Context API或Redux），详情页通过用户ID从全局状态中匹配对应数据，仅需在URL中传递用户ID参数。

示例（Context API实现） #

创建用户数据上下文

import { createContext, useContext, useState, useEffect } from 'react';

const UserDataContext = createContext();

export const UserDataProvider = ({ children }) => {
  const [allUserData, setAllUserData] = useState(null);

  useEffect(() => {
    // 模拟API请求获取数据
    const fetchUserData = async () => {
      const res = await fetch('/api/user-groups');
      const data = await res.json();
      setAllUserData(data);
    };
    fetchUserData();
  }, []);

  return (
    <UserDataContext.Provider value={allUserData}>
      {children}
    </UserDataContext.Provider>
  );
};

export const useUserData = () => useContext(UserDataContext);

表格页面跳转（传递用户ID）

import { useNavigate } from 'react-router-dom';
import { useUserData } from './UserDataContext';

const UserTable = () => {
  const navigate = useNavigate();
  const allUserData = useUserData();

  if (!allUserData) return <div>加载中...</div>;

  const openDetailPage = (userId) => {
    navigate(`/user-details/${userId}`);
  };

  return (
    <table>
      {/* 表格渲染逻辑同方案1，仅跳转时传递userId */}
      <tbody>
        {allUserData.groups.flatMap(group => group.users.map(user => (
          <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.email}</td>
            <td>
              <button onClick={() => openDetailPage(user.id)}>查看详情</button>
            </td>
          </tr>
        )))}
      </tbody>
    </table>
  );
};

详情页通过ID匹配用户数据

import { useParams } from 'react-router-dom';
import { useUserData } from './UserDataContext';

const UserDetails = () => {
  const { userId } = useParams();
  const allUserData = useUserData();

  if (!allUserData) return <div>加载中...</div>;

  // 从全局数据中查找对应用户
  const targetUser = allUserData.groups
    .flatMap(group => group.users)
    .find(user => user.id === parseInt(userId));

  if (!targetUser) {
    return <div>未找到该用户</div>;
  }

  // 渲染用户详情，同方案1
  return (
    <div className="user-detail-container">
      <h2>{targetUser.name}</h2>
      <p>邮箱：{targetUser.email}</p>
      <h3>地址信息</h3>
      <ul>
        <li>街道：{targetUser.address.street}</li>
        <li>城市：{targetUser.address.city}</li>
        <li>州/省：{targetUser.address.state}</li>
        <li>邮编：{targetUser.address.postalCode}</li>
        <li>国家：{targetUser.address.country}</li>
      </ul>
    </div>
  );
};

注意事项 #

• 路由state传递的数据仅存在于内存中，若用户刷新详情页，数据会丢失，可结合全局状态或添加刷新时重新请求的 fallback 逻辑。
• 敏感数据不要通过URL参数传递（用户ID是安全的，但邮箱、地址等信息不适合放URL里）。
• 全局状态更适合多组件复用数据的场景，路由state则更适合一次性的页面跳转数据传递。

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