如何在React组件内发起Get API请求实现邮箱映射用户名

1. 基础实现：单个Card组件内独立请求 #

如果你的Card组件是独立渲染的，可以在组件内部通过useState存储用户名，useEffect监听邮箱变化发起API请求，同时处理加载和错误状态：

import { useState, useEffect } from 'react';

const Card = ({ appBy }) => {
  const [userName, setUserName] = useState('');
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUserName = async () => {
      setIsLoading(true);
      setError(null);
      try {
        // 替换为你的实际API地址，这里假设接口接收邮箱参数返回用户信息
        const response = await fetch(`/api/users?email=${encodeURIComponent(appBy)}`);
        if (!response.ok) throw new Error('请求失败');
        const userData = await response.json();
        setUserName(userData.name); // 假设接口返回的姓名字段是name
      } catch (err) {
        setError(err.message);
        setUserName('未知用户'); // 错误时显示默认值
      } finally {
        setIsLoading(false);
      }
    };

    if (appBy) { // 确保邮箱存在时才发起请求
      fetchUserName();
    }
  }, [appBy]); // 依赖项为appBy，邮箱变化时重新请求

  return (
    <div className="card">
      {/* 其他Card内容 */}
      <div className="app-by">
        {isLoading ? '加载中...' : error ? error : `提交人：${userName}`}
      </div>
    </div>
  );
};

export default Card;

2. 优化：缓存请求结果避免重复调用 #

如果数据库数组中有重复的邮箱，每个Card单独请求会造成冗余。可以用useRef创建一个缓存对象，存储已请求过的邮箱和对应的用户名，减少API调用次数：

import { useState, useEffect, useRef } from 'react';

const Card = ({ appBy }) => {
  const [userName, setUserName] = useState('');
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const userCache = useRef({}); // 缓存已请求的邮箱-用户名映射

  useEffect(() => {
    const fetchUserName = async () => {
      // 先检查缓存，存在直接使用
      if (userCache.current[appBy]) {
        setUserName(userCache.current[appBy]);
        setIsLoading(false);
        return;
      }

      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch(`/api/users?email=${encodeURIComponent(appBy)}`);
        if (!response.ok) throw new Error('请求失败');
        const userData = await response.json();
        const name = userData.name;
        setUserName(name);
        userCache.current[appBy] = name; // 存入缓存
      } catch (err) {
        setError(err.message);
        setUserName('未知用户');
      } finally {
        setIsLoading(false);
      }
    };

    if (appBy) {
      fetchUserName();
    }
  }, [appBy]);

  return (
    <div className="card">
      {/* 其他Card内容 */}
      <div className="app-by">
        {isLoading ? '加载中...' : error ? error : `提交人：${userName}`}
      </div>
    </div>
  );
};

export default Card;

3. 进阶：批量请求优化（适合大量数据场景） #

如果数据库数组条目很多，逐个请求效率极低。可以在父组件中先收集所有唯一邮箱，批量请求一次，再将用户名映射到每个Card：

// 父组件
import { useState, useEffect } from 'react';
import Card from './Card';

const CardList = ({ databaseArray }) => {
  const [userMap, setUserMap] = useState({}); // 存储邮箱-用户名映射
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchAllUsers = async () => {
      // 收集所有唯一邮箱
      const uniqueEmails = [...new Set(databaseArray.map(item => item.appBy))].filter(Boolean);
      if (uniqueEmails.length === 0) {
        setIsLoading(false);
        return;
      }

      try {
        // 替换为你的批量查询API，这里假设接口接收多个邮箱参数
        const response = await fetch(`/api/users/batch?emails=${uniqueEmails.join(',')}`);
        if (!response.ok) throw new Error('批量请求失败');
        const users = await response.json();
        // 构建邮箱到用户名的映射
        const map = users.reduce((acc, user) => {
          acc[user.email] = user.name;
          return acc;
        }, {});
        setUserMap(map);
      } catch (err) {
        console.error(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchAllUsers();
  }, [databaseArray]);

  if (isLoading) return <div>加载用户数据中...</div>;

  return (
    <div className="card-list">
      {databaseArray.map(item => (
        <Card
          key={item.id}
          appBy={item.appBy}
          userName={userMap[item.appBy] || '未知用户'}
          // 其他Card属性
        />
      ))}
    </div>
  );
};

// 子Card组件简化版
const Card = ({ appBy, userName }) => {
  return (
    <div className="card">
      {/* 其他Card内容 */}
      <div className="app-by">提交人：{userName}</div>
    </div>
  );
};

以上三种方案可以根据你的数据量和API支持情况选择：

• 少量数据且无重复邮箱：用基础实现即可
• 有重复邮箱：用缓存优化方案
• 大量数据：优先用批量请求方案，减少API调用次数

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