如何在React Native中正确调用Node.js+Express+Firebase开发的API？

我开发了一个基于Node.js、Express和Firebase的API，供React Native应用调用。这个API的功能是筛选符合特定条件的用户，然后调用函数修改Firebase数据库的字段，在浏览器测试时运行完全正常。

我的API路由结构如下：

router.get('/:senderID/:numberOfShare/:drop', function(req, res, next) {
  // 从数据库筛选用户的代码
  FOREACH {
    // 调用修改用户数据的function2函数
  }
  // 此处定义function2
  function function2() {
    修改数据库中的用户数据
  }
}

我尝试在React Native中调用这个API，但一直没成功，我的测试代码是这样的：

shareDrop(drop, parent) {
  fetch('192.168.1.4:3000/users/senderID/numberOfShare/drop', {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    params: JSON.stringify({
      senderID: this.state.uid,
      numberOfShare: 'parent.state.numberOfShare',
      drop: drop
    }),
  });
}

请问我该怎么在React Native中正确调用这个API呢？

你的问题主要出在API请求的URL构造和GET请求参数的传递方式上，咱们一步步来修正：

1. 修复URL的协议和参数占位符 #

首先，你的fetch URL有两个明显问题：

• 缺少HTTP协议前缀：React Native的fetch要求完整URL，必须加上http://
• 你直接写了占位符字符串（senderID/numberOfShare/drop），没有替换成实际的变量值

因为你的API是用URL路径参数（:senderID这类）接收数据的，所以需要把动态变量直接拼接到URL路径里。

2. 移除GET请求里的params字段 #

GET请求并不支持params这个配置项，而且你用JSON.stringify处理参数也是错误的——你的API是从URL路径取参数，不是从请求体或查询字符串里获取。

3. 修正变量引用错误 #

你写的'parent.state.numberOfShare'是字符串字面量，不是实际读取parent的state值，要去掉引号才能正确获取变量。

修正后的完整代码 #

shareDrop(drop, parent) {
  // 用模板字符串拼接正确的URL路径参数
  const url = `http://192.168.1.4:3000/users/${this.state.uid}/${parent.state.numberOfShare}/${drop}`;
  
  fetch(url, {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
  })
  // 别忘了处理请求的响应和错误！之前的代码没做这一步，就算调用成功也看不到结果
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP错误！状态码：${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('API调用成功:', data);
    // 这里可以添加成功后的逻辑，比如更新UI或提示用户
  })
  .catch(error => {
    console.error('API调用失败:', error);
    // 处理错误情况，比如弹出错误提示
  });
}

额外的检查点 #

• 确保你的手机/模拟器和运行Node.js的电脑在同一个局域网里，否则无法访问192.168.1.4这个本地IP
• 检查跨域问题：如果React Native和API不在同一个域名/端口，需要在Express里用cors中间件开启跨域支持

  // 在Express项目中安装cors：npm install cors
  const cors = require('cors');
  app.use(cors());
  

• 确认API路由里的function2定义正确：你原来的代码里function2的写法不规范，要改成function function2()或者箭头函数形式

这样调整之后，应该就能正常调用API啦！

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