如何通过userId从不同schema获取用户名和头像并渲染到React UI？

你可以选择两种方案实现需求，优先推荐后端接口改造的方案，性能和维护成本都更低：

方案1：后端接口改造（推荐） #

因为用户和订单数据分属不同schema，跨表关联查询本来就适合在服务端完成：

• 让后端修改/orders接口逻辑，关联查询用户表，在返回的订单数据中额外携带对应用户的username字段
• 前端只需要修改渲染逻辑，把原来的{order.userId}替换为{order.username}即可，其他逻辑不用动

方案2：前端单独拉取用户信息（暂时无法改后端时用） #

如果暂时没有权限修改后端接口，可以前端单独请求用户数据，做本地映射：

实现步骤： #

1. 新增一个userMap状态，用来存储userId和用户名的映射关系
2. 拿到订单列表后，先去重所有订单的userId，批量查询用户信息，存入映射表
3. 渲染时从映射表中取出对应用户名展示即可

修改后的完整代码： #

import React, { useEffect, useState } from 'react'
import { format } from 'timeago.js'
import { userRequest } from '../../requestMethod'
import './Widgetlg.css'

const WidgetLg = () => {
  const Button = ({ type }) => {
    return <button className={'widgetLgButton ' + type}>{type}</button>
  }
  const [orders, setOrders] = useState([])
  // 新增用户映射表，key是userId，value是对应用户名
  const [userMap, setUserMap] = useState({})

  useEffect(() => {
    const getOrders = async () => {
      try {
        const res = await userRequest.get('orders')
        const orderList = res.data
        setOrders(orderList)
        
        // 去重所有需要查询的userId，避免重复请求
        const userIds = [...new Set(orderList.map(order => order.userId))]
        // 批量查询用户信息，这里假设后端有支持批量查用户的接口，入参是userId数组
        const userRes = await userRequest.post('users/batch', { userIds })
        // 组装成userId到用户名的映射
        const map = {}
        userRes.data.forEach(user => {
          map[user.id] = user.username
        })
        setUserMap(map)
      } catch (error) {
        console.log(error)
      }
    }
    getOrders()
  }, [])

  return (
    <div className="widgetLg">
      <h3 className="widgetLgTitle">最新交易记录</h3>
      <table className="widgetTable">
        <tr className="widgetLgTr">
          <th className="widgetLgTh">客户</th>
          <th className="widgetLgTh">日期</th>
          <th className="widgetLgTh">金额</th>
          <th className="widgetLgTh">状态</th>
        </tr>
        {orders.map((order) => (
          <tr className="widgetLgTr" key={order.id}>
            <td className="widgetLgUser">
              {/* 从映射表取用户名，没取到的话兜底显示userId */}
              <span className="WidgetLgName"> {userMap[order.userId] || order.userId} </span>
            </td>
            <td className="widgetLgDate"> {format(order.createdAt)} </td>
            <td className="widgetLgAmmount">P {order.amount} </td>
            <td className="widgetLgStatus">
              <Button type={order.status} />
            </td>
          </tr>
        ))}
      </table>
    </div>
  )
}

export default WidgetLg

注意事项： #

• 如果后端没有批量查询用户的接口，也可以循环调用单个用户查询接口，但不推荐，订单量大的时候会产生大量请求，容易触发接口限流
• 渲染时要加兜底逻辑，避免用户信息还没请求到的时候显示空白
• 记得给循环渲染的tr加唯一key属性，避免React报警告

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