React Native从本地JSON Server获取数据失败，请求技术帮助

我一眼就看到了问题核心——你的Axios实例配置和请求路径重复了，导致最终请求的URL不正确，所以拿不到数据。下面一步步帮你修正：

1. 修正Axios实例的baseURL #

你的Server实例已经把baseURL设为了http://localhost:3000/office，这意味着所有通过这个实例发起的请求都会自动拼接这个前缀。但你之后又调用Server.get('/office')，最终请求的URL会变成http://localhost:3000/office/office，这显然不是JSON Server的正确资源路径。

假设你的JSON数据文件（比如db.json）结构是这样的：

{
  "office": [
    {"id": 1, "jobTitle": "前端开发"},
    {"id": 2, "jobTitle": "后端开发"}
  ]
}

那正确的baseURL应该是JSON Server的根地址，也就是http://localhost:3000，然后用/office作为请求路径来获取对应数组的数据。

修正后的Axios实例代码：

import axios from 'axios';
const Server = axios.create({ 
  baseURL: 'http://localhost:3000', // 改为JSON Server根地址
  timeout: 5000, 
  headers: {'accept': 'application/json'} 
});
export default Server;

如果你确实需要把baseURL设为/office（比如有特定路由需求），那请求时应该用Server.get('/')，这样最终URL是http://localhost:3000/office，也能正确获取数据。

2. 完善你的fetchJobs函数 #

你的代码没写完，我帮你补全完整的异步请求逻辑，包括成功回调、错误处理和状态分发：

import Server from './path-to-your-axios-instance'; // 替换成你的实例文件路径
import JobsTypes from './path-to-your-JobsTypes'; // 替换成你的类型定义路径

export function fetchJobs(props) {
  return function(dispatch) {
    dispatch({ type: JobsTypes.FETCH_OFFICE }); // 分发请求开始的状态

    Server
      .get('/office') // 现在路径正确了
      .then((response) => {
        // 成功获取数据，分发成功状态和数据
        dispatch({ 
          type: JobsTypes.FETCH_OFFICE_SUCCESS, 
          payload: response.data 
        });
      })
      .catch((error) => {
        // 请求失败，分发错误状态和信息
        dispatch({ 
          type: JobsTypes.FETCH_OFFICE_FAILURE, 
          error: error.message || '获取数据失败' 
        });
        console.error('数据请求出错:', error);
      });
  };
}

3. 额外检查项 #

• 确保JSON Server已经启动：运行json-server --watch db.json命令，确认服务在localhost:3000端口正常运行。
• 检查db.json里的office字段拼写是否正确，数据结构是否符合JSON规范。
• 打开浏览器开发者工具（F12）的Network标签，查看请求的URL是否正确，以及返回的状态码（200表示成功，404说明路径错误）。

这样调整后，你应该就能正常获取到JSON Server里的数据了。

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