React中如何根据props传入的用户ID动态设置API请求头拉取对应个人资料

优先使用对象映射实现匹配逻辑，相比if-else语句可读性更高、后续扩展规则更方便，实现步骤如下：

• 1. 定义用户ID与授权密钥的映射关系

// 可以放在组件内部，也可以抽成公共配置文件
const SECRET_MAP = {
  id1: 'abc',
  id2: 'def',
  id3: 'ghi'
}

• 2. 基于传入的props中的用户ID匹配密钥，同时添加兜底逻辑避免匹配不到的异常

// 假设props中接收的用户ID字段为userId
const currentSecret = SECRET_MAP[props.userId] || '' // 可根据需求自定义兜底值，比如抛出异常提示无权限

• 3. 发起API请求时将密钥注入请求头
     以fetch请求为例：

fetch('你的个人资料接口地址', {
  method: 'GET',
  headers: {
    'Authorization': currentSecret, // 请求头字段名根据接口实际要求调整，比如部分场景为'X-Auth-Key'
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(data => {
  // 处理返回的个人资料数据
})

如果用axios，也可以在请求拦截器里统一注入，避免每个请求重复写逻辑：

// 在请求拦截器中统一处理
axios.interceptors.request.use(config => {
  // 从组件参数/全局状态中拿到当前用户ID
  const userId = props.userId
  const secret = SECRET_MAP[userId]
  if (secret) {
    config.headers.Authorization = secret
  }
  return config
})

如果你之前的if-else逻辑不生效，可以排查两个常见问题：

1. 用户ID的判断条件是否匹配，比如是否存在字符串/数字类型不一致的情况，比如props.userId是数字1而你判断的是字符串'id1'
2. 密钥赋值的作用域是否正确，是否在请求发起的作用域内可以拿到赋值后的密钥变量

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