React项目对接CocktailDB API时axios无法发起GET请求问题求助

核心问题点 #

• 请求URL缺少协议前缀：你写的URL = "www.thecocktaildb.com/api/json/v1/1/list.php?c=list"没有带https://，axios会将其识别为相对路径，拼接在你当前React应用的服务域名后，自然请求不到资源；浏览器地址栏直接输入时浏览器会自动补全协议，因此可以正常访问。
• 未处理axios的异步返回：axios.get()返回的是Promise实例，直接打印无法拿到接口返回的真实数据，需要通过async/await或者.then()方法处理异步结果。
• 你当前useEffect的依赖数组为空，本身就只会在组件挂载时调用一次API，刚好符合你仅调用一次的需求。

修正后的完整代码 #

ContextCategories.js #

import React, { createContext, useState, useEffect } from 'react';
import axios from 'axios';

// 创建上下文
export const ContextCategories = createContext();

// 创建提供者组件
const CategoriesProvider = (props) => {
  // 上下文状态
  const [categories, setCategories] = useState([]);

  // 调用API，依赖数组为空仅挂载时执行一次
  useEffect(()=>{
    const getCocktailCategories = async () =>{
      try {
        // 补全URL的https协议前缀
        const URL = "https://www.thecocktaildb.com/api/json/v1/1/list.php?c=list";
        const res = await axios.get(URL);
        // 将返回的分类数据存入状态
        setCategories(res.data.drinks);
        console.log(res.data.drinks);
      } catch (err) {
        // 错误捕获，方便排查问题
        console.error('请求分类数据失败：', err);
      }                       
    }
    getCocktailCategories();
  },[]);

  return(                
    <ContextCategories.Provider
      // 将状态传递给消费组件
      value={{
        categories
      }}
    >
      {props.children}
    </ContextCategories.Provider>
  );
};

export default CategoriesProvider;

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