React Native使用axios调用Yelp Api商户搜索返回空数组

核心故障点为axios请求实例的鉴权请求头格式错误：Yelp Fusion API要求Authorization头的Bearer前缀与API密钥之间必须存在半角空格，当前配置中两者直接拼接，服务端无法识别合法身份，请求实际返回鉴权失败错误，被catch块捕获后仅做了无差别日志打印，未触发结果状态更新，因此results始终为初始空数组。

1. 修正axios配置的Authorization头格式，补全Bearer与密钥之间的空格：

import axios from "axios";

export default axios.create({
  baseURL: "https://api.yelp.com/v3/businesses",
  headers: {
    Authorization:
      "Bearer ZPzXkPFyF_mWgHVjj_a1QZqiFkktt_iXYcX8JED6Gp2i73aYJTsvfUSApIVh7w8B8CNYfwnvBKo50MZvR34dvO3Cm1tQxlFp_PnGgCFjce1h0I1UF3zcKHnr7eq8YnYx",
  },
});

2. 优化错误捕获逻辑，方便后续定位问题，避免静默失败：

const searchApi = async () => {
 try {
   const response = await yelp.get("/search", {
     params: {
       limit: 50,
       term,
       location: "san jose",
     },
   });
   setResults(response.data.businesses);
 } catch (err) {
   console.log("请求失败：", err.response?.data || err.message);
 }
};

3. 可选优化：页面首次加载时默认触发一次搜索，无需等待用户输入操作即可展示初始结果，在SearchScreen组件中引入useEffect实现：

import React, { useState, useEffect } from "react";

// 组件内部，声明完searchApi方法后添加
useEffect(() => {
  searchApi();
}, []);

保存修改后重新加载应用，输入关键词触发搜索，控制台不再返回鉴权类错误，页面结果计数正常展示，results状态可正确获取圣何塞地区匹配关键词的商户列表。

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