Axios请求封装后无法获取数据，users数组为空问题求助

从封装过程的几个核心环节入手，大概率是细节处理不到位导致的：

1. 自定义Hook的状态更新逻辑错误 #

检查usePosts里的状态操作是否完整：

• 是否初始化users为空数组后，请求完成没有调用setUsers更新状态？
• 是否useEffect的依赖配置有误，导致请求根本没触发？

错误示例：

function usePosts() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    // 仅调用请求，未更新状态
    PostMyServise.getPost();
  }, []);
  return users;
}

修正写法：

function usePosts() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    const fetchUsers = async () => {
      const userList = await PostMyServise.getPost();
      setUsers(userList); // 确保请求结果同步到状态
    };
    fetchUsers();
  }, []);
  return users;
}

2. 封装的getPost方法数据结构不匹配 #

直接用axios.get时，你可能取的是res.data（用户数组），但封装后如果返回了整个axios响应对象而非响应体，就会导致状态拿到的不是预期的数组：

错误封装：

class PostMyServise {
  static async getPost() {
    // 返回的是包含data的axios响应对象，不是用户数组
    return axios.get('/users');
  }
}

修正封装（和直接调用逻辑对齐）：

class PostMyServise {
  static async getPost() {
    const res = await axios.get('/users');
    return res.data; // 返回实际的用户数组
  }
}

3. createPost后未触发用户列表刷新 #

直接调用时，你可能在创建完成后重新发起了请求，但用自定义Hook后，缺少了刷新逻辑：

直接调用的正确逻辑：

const handleCreate = async () => {
  await axios.post('/users', newUser);
  // 创建后主动拉取最新数据
  const res = await axios.get('/users');
  setUsers(res.data);
};

给Hook添加刷新方法：

function usePosts() {
  const [users, setUsers] = useState([]);
  const fetchUsers = async () => {
    const userList = await PostMyServise.getPost();
    setUsers(userList);
  };
  useEffect(() => {
    fetchUsers();
  }, []);
  return { users, fetchUsers }; // 返回刷新方法供组件调用
}

组件中调用刷新：

const { users, fetchUsers } = usePosts();
const handleCreate = async () => {
  await PostMyServise.createPost(newUser);
  await fetchUsers(); // 创建完成后刷新用户列表
};

4. 请求错误未被捕获 #

封装的getPost可能请求失败（比如路径错误、权限问题），但没抛出错误，导致Hook里一直返回初始空数组，而直接调用时你可能有错误处理能发现问题：

给封装方法添加错误处理：

class PostMyServise {
  static async getPost() {
    try {
      const res = await axios.get('/users');
      return res.data;
    } catch (err) {
      console.error('获取用户列表失败:', err);
      throw err; // 抛出错误让上层Hook处理
    }
  }
}

Hook中捕获错误：

function usePosts() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const userList = await PostMyServise.getPost();
        setUsers(userList);
      } catch (err) {
        setError(err);
      }
    };
    fetchUsers();
  }, []);
  return { users, error };
}

5. 封装的请求配置不一致 #

检查PostMyServise里的axios实例配置（baseURL、请求头、拦截器等）是否和直接调用时一致，比如直接调用用的是https://api.example.com/users，但封装类的baseURL设成了错误地址，导致请求返回空数据，核对实际请求URL即可发现问题。

内容的提问来源于stack exchange，提问作者Максим Дмитриевич