使用Context API与Axios获取水果数据失败：数据不显示且控制台无记录

核心问题1：数据获取函数未触发 #

FruitsData组件中定义了fetchFruits但从未执行，导致API请求根本没发起，fruits始终是空数组。

修复：在FruitsData中添加useEffect钩子，组件挂载时自动调用获取数据的函数：

import React, { useState, useEffect } from 'react'; // 补上useEffect导入
import axios from 'axios';
import ApiContext from './ApiContext';

function FruitsData(props) {
const [fruits, setFruits] = useState([]);
const [selectedItem, setSelectedItem] = useState(null);

// 组件挂载时触发数据获取
useEffect(() => {
  fetchFruits();
}, []);

const fetchFruits = async () => {
    const response = await axios.get('/api/fruits');
    setFruits(response.fruits);
    console.log(response.fruits)
}

// ...其余代码不变
}

核心问题2：Axios响应数据取值错误 #

Axios的接口响应数据默认包裹在response.data对象中，直接访问response.fruits会得到undefined，导致setFruits存入无效值。

修复：修改两个请求函数的响应取值逻辑：

const fetchFruits = async () => {
    try {
        const response = await axios.get('/api/fruits');
        setFruits(response.data.fruits); // 改为response.data.fruits
        console.log(response.data.fruits);
    } catch (err) {
        console.error('获取水果列表失败:', err); // 添加错误捕获，方便排查问题
    }
}

const fetchItem = async (id) => {
    try {
        const response = await axios.get(`/api/fruit/${id}`);
        setSelectedItem(response.data.fruit); // 改为response.data.fruit
    } catch (err) {
        console.error('获取水果详情失败:', err);
    }
}

核心问题3：Context解构不完整 #

Context Provider传入了6项数据，但Training组件只解构了前两项，若需要调用fetchFruits或使用其他Context值会无法获取。同时组件缺少必要的Hook导入，会导致运行时错误。

修复：补全导入并按需解构Context：

import React, { useContext } from 'react'; // 补上useContext导入
import { useNavigate } from 'react-router-dom'; // 补上useNavigate导入
import ApiContext from '../../contexts/ApiContext';

function Training() {
let navigate = useNavigate();
// 根据需求完整解构Context，这里至少拿到fruits数据
const [fruits] = useContext(ApiContext);

return (
    <div>
       {/* fruits初始值是空数组，无需额外判断null */}
       {fruits.map((fruit) => (
       <FruitWidget fruit={fruit} key={fruit.id} />
        ))}
    </div>
);
}
export default Training;

额外排查点 #

• 检查API路径配置：如果是本地开发，确认/api/fruits是否需要配置代理（比如Create React App中的proxy字段），或直接使用完整的后端服务地址（如http://localhost:3001/api/fruits）。
• 查看浏览器Network面板：确认请求是否正常发送，以及响应的状态码、返回数据是否符合预期。

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