React Native对接Yelp报错searchApi is not a function如何解决？

问题原因 #

你遇到的报错核心是searchApi实际拿到的值是空字符串，而非预期的函数，90%以上的场景是以下两个原因导致：

1. 自定义hookuseResults的返回值顺序，和SearchScreen里解构取值的顺序不匹配，空字符串刚好是errorMessage的初始值，很可能是你把errorMessage的位置放到了返回数组的第一位
2. React Native/Expo缓存未更新，运行的是你修改前的旧代码

修复方案 #

• 优先用对象返回代替数组返回，完全避免顺序匹配问题：
  修改useResults.js的返回语句：

  // 原来的数组返回
  // return [searchApi, result, errorMessage];
  // 改成对象返回
  return { searchApi, result, errorMessage };
  

  对应修改SearchScreen.js的取值方式为对象解构：

  // 原来的数组解构
  // const [searchApi, result, errorMessage] = useResults();
  // 改成对象解构
  const { searchApi, result, errorMessage } = useResults();
  

• 如果要保留数组返回的写法，严格检查useResults返回值顺序和SearchScreen解构顺序完全一致，确保第一位是searchApi
• 清理缓存重启开发服务，避免旧代码干扰：

  # Expo项目执行
  npx expo start --clear
  # 原生React Native项目执行
  npx react-native start --reset-cache
  

额外验证方法 #

如果修改后还是报错，可以在两个位置加打印确认值是否正确：

1. 在useResults.js的return前加：console.log('返回的searchApi类型：', typeof searchApi)，预期输出function
2. 在SearchScreen.js调用useResults()后加：console.log('拿到的searchApi类型：', typeof searchApi)，预期输出function

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