React Native引入外部JS文件调用方法时报错：undefined is not an object

嘿，我一眼就瞅出问题所在啦！你遇到的'undefined is not an object (evaluating _ApiHelper.ApiHelper.getPost)'错误，核心原因是ApiHelper的导出方式和Login组件的导入方式不兼容，导致你拿到的ApiHelper是undefined，自然没法调用它的getPost方法。

我来给你拆解下：

• 你的ApiHelper.js用的是默认导出：export default ApiHelper;，这种导出方式意味着整个文件只对外暴露这一个对象，导入时不需要用花括号包裹。
• 但你的Login组件里用的是命名导入：import { ApiHelper } from '../../api/ApiHelper';，这种语法是用来导入那些用export const/function定义的命名成员的，和默认导出完全不匹配。

两种解决方法任你选 #

方案一：修改Login组件的导入语句（推荐） #

把导入代码改成默认导入的写法，去掉花括号：

// 原来的导入（错误）
// import { ApiHelper } from '../../api/ApiHelper';

// 修改后的导入（正确）
import ApiHelper from '../../api/ApiHelper';

修改后，你原来的alert(ApiHelper.getPost())代码就能正常执行，弹出数字1了。

方案二：修改ApiHelper的导出方式为命名导出 #

如果你想保留命名导入的写法，可以把ApiHelper的导出改成命名导出：

// 原来的导出（默认导出）
// const ApiHelper = {
//   getPost:() => {
//     return 1;
//   }
// }
// export default ApiHelper;

// 修改后的导出（命名导出）
export const ApiHelper = {
  getPost:() => {
    return 1;
  }
}

这样你原来的import { ApiHelper } from '../../api/ApiHelper';就可以正常工作了。

不管选哪种方案，修改后再运行代码，那个undefined的错误应该就消失啦～

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